A CSS, JS, and HTML Turntable

Vinyl.vue

<template>
  <div id="root">
    <center>
      <div id="turntable">
        <div id="table-shadow"></div>
        <div id="table-feet"></div>
        <div id="wood">
          <div id="grain1"></div>
          <div id="grain2"></div>
          <div id="grain3"></div>
          <div id="grain4"></div>
          <div id="grain5"></div>
          <div id="grain6"></div>
        </div>
        <div id="wood2">
          <div id="grain7"></div>
          <div id="grain8"></div>
          <div id="grain9"></div>
          <div id="grain10"></div>
          <div id="grain11"></div>
        </div>
        <div id="table"></div>
        <div id="button" @click="handlePlayerButtonPress"></div>
        <div id="disk">
          <div id="label"></div>
        </div>
        <div id="axis-shadow"></div>
        <div id="axis"></div>
        <div id="arm-shadow"></div>
        <div id="weight-shadow"></div>
        <div id="base">
          <div id="axle-shadow"></div>
        </div>
        <div id="lever"></div>
        <div id="weight"></div>
        <div id="axle"></div>
        <div id="arm"></div>
        <div id="head"></div>
      </div>
    </center>
  </div>
</template>

<script>
export default {
  name: "Component",
  methods: {
    handlePlayerButtonPress: (e) => {
      let lbl = document.querySelector("#label");
      let lblPlayStateWebKit = lbl.style["-webkit-animation-play-state"];
      let lblPlayState = lbl.style["animation-play-state"];
      if( lblPlayState == 'running' || lblPlayStateWebKit == 'running'){
        e.target.style.top = '157px';
        e.target.style["box-shadow"] = '0px 0px 0px #1a1a1a';
        lbl.style["animation-play-state"] = "paused";
        lbl.style["-webkit-animation-play-state"] = "paused";
      }else{
        e.target.style.top = '155px';
        e.target.style["box-shadow"] = '2px 2px 0px #1a1a1a';
        lbl.style["animation-play-state"] = "running";
        lbl.style["-webkit-animation-play-state"] = "running";
      }
    }
  }
};
</script>

<style scoped>
#turntable{
  position:relative;
  width:660px;
  height:400px;
  margin-top:100px;
  /*top:20%;
  left:10%;*/
  background:transparent;
}

#disk{
  position:absolute;
  top:-60px;
  left:128px;
  width:300px;
  height:300px;
  background:#1a1a1a;
  border-radius: 150px;
  box-shadow:0px 8px #b8c6db;
  transform: rotateX(50deg) rotateY(-3deg);
  -ms-transform: rotateX(50deg) rotateY(-3deg);
  -moz-transform: rotateX(50deg) rotateY(-3deg);
  -webkit-transform: rotateX(50deg) rotateY(-3deg);
  z-index:5;
}

#disk:before{
  position:absolute;
  top:-20px;
  left:0px;
  width:300px;
  height:300px;
  background:#383838;
  border-radius: 150px;
  box-shadow:0px 3px #252525;
  content:'';
}

#label{
  position:absolute;
  top:75px;
  left:95px;
  width:110px;
  height:110px;
  border-radius: 150px;
  background:#ac5151;
  content:'';
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}

#label:after{
  position:absolute;
  top:10px;
  left:10px;
  width:90px;
  height:45px;
  background:#ac5151;
  border-radius: 90px 90px 0 0;
  content:'';
}

#label:before{
  position:absolute;
  top:5px;
  left:5px;
  width:100px;
  height:100px;
  background:#9dbc96;
  border-radius: 90px;
  content:'';
}

#axis-shadow{
  position:absolute;
  top:75px;
  left:274px;
  width:6px;
  height:10px;
  background:#000;
  opacity:0.5;
  border-radius: 0 0 6px 6px;
  content:'';
  z-index:6;
}

#axis{
  position:absolute;
  top:69px;
  left:274px;
  width:6px;
  height:10px;
  background:#f1f9fe;
  opacity:1;
  border-radius: 6px;
  z-index:7;
}

#axis:before{
  position:absolute;
  top:2px;
  left:2px;
  width:4px;
  height:8px;
  background:#111;
  opacity:.2;
  border-radius: 6px 6px 0 0;
  content:'';
}

#lever{
  position:absolute;
  top:88px;
  left:528px;
  width:2px;
  height:40px;
  background:#464646;
  border-right:1px solid #1a1a1a;
  z-index:5; 
}

#lever:before{
  position:absolute;
  top:35px;
  left:-2px;
  width:7px;
  height:12px;
  background:#1a1a1a;
  border-radius:2px;
  box-shadow:0 6px #b8c6db;
  content:'';
}

#lever:after{
  position:absolute;
  top:35px;
  left:-2px;
  width:5px;
  height:9px;
  background:#464646;
  border-radius:2px 2px 0 0;
  content:'';
}

#table{
  position:absolute;
  top:8px;
  left:109px;
  width:437px;
  height:223px;
  background:#5c656f;
  border-radius: 10px;
  transform: rotateZ(10deg) skewX(-25deg);
  -ms-transform: rotateZ(10deg) skewX(-25deg);
  -moz-transform: rotateZ(10deg) skewX(-25deg);
  -webkit-transform: rotateZ(10deg) skewX(-25deg);
  z-index:2;
}

#table:before{
  position:absolute;
  top:-5px;
  left:-2px;
  width:436px;
  height:225px;
  background:#b8c7dd;
  border-radius: 10px;
  content:'';
}

#table:after{
  position:absolute;
  top:-12px;
  left:-6px;
  width:436px;
  height:225px;
  background:#fff;
  border-radius: 10px;
  content:'';
  box-shadow: -7px -5px 20px -13px #778;
}

#table-shadow{
  position:absolute;
  top:53px;
  left:112px;
  width:435px;
  height:220px;
  background:#000;
  border-radius: 10px;
  transform: rotateZ(10deg) skewX(-25deg);
  -ms-transform: rotateZ(10deg) skewX(-25deg);
  -moz-transform: rotateZ(10deg) skewX(-25deg);
  -webkit-transform: rotateZ(10deg) skewX(-25deg);
  opacity:0.4;
}

#table-feet{
  position:absolute;
  top:183px;
  left:70px;
  width:45px;
  height:45px;
  background:#455162;
  border-radius: 50px;
  -ms-transform: rotateZ(10deg) skewX(-25deg);
  -moz-transform: rotateZ(10deg) skewX(-25deg);
  -webkit-transform: rotateZ(20deg) skewX(-25deg);
  box-shadow: 369px 0px 0px #455162;
  -webkit-box-shadow: 330px -63px 0px #455162;
}

#button{
  position:absolute;
  top:155px;
  left:64px;
  width:10px;
  height:10px;
  background:#464646;
  border-radius: 10px;
  transform: rotateZ(30deg) skewX(-25deg);
  -ms-transform: rotateZ(30deg) skewX(-25deg);
  -moz-transform: rotateZ(30deg) skewX(-25deg);
  -webkit-transform: rotateZ(30deg) skewX(-25deg);
  box-shadow:2px 2px #1a1a1a;
  z-index:10;
}

#button:hover{
  cursor:pointer;
}

#wood{
  position:absolute;
  top:219px;
  left:43px;
  width:440px;
  height:26px;
  background:#b38674;
  border-radius: 0 0 15px 8px;
  transform: rotateZ(10deg) skewX(10deg);
  -ms-transform: rotateZ(10deg) skewX(10deg);
  -moz-transform: rotateZ(10deg) skewX(10deg);
  -webkit-transform: rotateZ(10deg) skewX(10deg);
  overflow:hidden;
  z-index:1;
}

#wood2{
  position:absolute;
  top:52px;
  left:524px;
  width:25px;
  height:240px;
  background:#b38674;
  border-radius:0 2px 25px 0;
  transform: rotateZ(50deg) skewX(15deg) skewY(48deg);
  -ms-transform: rotateZ(50deg) skewX(15deg) skewY(48deg);
  -moz-transform: rotateZ(50deg) skewX(15deg) skewY(48deg);
  -webkit-transform: rotateZ(50deg) skewX(15deg) skewY(48deg);
  overflow:hidden;
}

#arm{
  position:absolute;
  top:108px;
  left:400px;
  width:150px;
  height:8px;
  background:#464646;
  border-bottom:3px solid #1a1a1a;
  border-radius: 45px;
  transform: rotateZ(-55deg);
  -ms-transform: rotateZ(-55deg);
  -moz-transform: rotateZ(-55deg);
  -webkit-transform: rotateZ(-55deg);
  z-index:4;
}

#base{
  position:absolute;
  top:55px;
  left:490px;
  width:58px;
  height:58px;
  background:#1a1a1a;
  border-radius: 55px;
  transform: rotateZ(30deg) skewX(-26deg);
  -ms-transform: rotateZ(30deg) skewX(-26deg);
  -moz-transform: rotateZ(30deg) skewX(-26deg);
  -webkit-transform: rotateZ(30deg) skewX(-26deg);
  z-index:4;
}

#base:before{
  position:absolute;
  top:-5px;
  left:-5px;
  width:58px;
  height:58px;
  background:#464646;
  border-radius: 55px;
  content:'';
}

#base:after{
  position:absolute;
  top:26px;
  left:38px;
  width:7px;
  height:7px;
  background:#464646;
  border-radius: 55px;
  box-shadow:1px 1px #1a1a1a;
  content:'';
}

#axle-shadow{
  position:absolute;
  top:12px;
  left:8px;
  width:35px;
  height:21px;
  background:#1a1a1a;
  transform: rotateZ(-23deg);
  -ms-transform: rotateZ(-23deg);
  -moz-transform: rotateZ(-23deg);
  -webkit-transform: rotateZ(-23deg);
}

#axle-shadow:before{
  position:absolute;
  top:12px;
  left:12px;
  width:10px;
  height:30px;
  background:#1a1a1a;
  content:'';
}

#axle-shadow:after{
  position:absolute;
  top:-16px;
  left:12px;
  width:10px;
  height:30px;
  background:#1a1a1a;
  content:'';
}

#axle{
  position:absolute;
  top:24px;
  left:491px;
  width:60px;
  height:45px;
  background:#464646;
  border-radius: 45px;
  transform: rotateZ(-55deg) scaleX(.9);
  -ms-transform: rotateZ(-55deg) scaleX(.9);
  -moz-transform: rotateZ(-55deg) scaleX(.9);
  -webkit-transform: rotateZ(-55deg) scaleX(.9);
  z-index:4;
}

#axle:before{
  position:absolute;
  top:0px;
  left:0px;
  width:45px;
  height:45px;
  background:#1a1a1a;
  border-radius: 45px;
  content:'';
}

#axle:after{
  position:absolute;
  top:14px;
  left:10px;
  width:17px;
  height:17px;
  background:transparent;
  border-radius: 45px;
  box-shadow:3px 0px #464646;
  content:'';
}

#weight{
  position:absolute;
  top:9px;
  left:516px;
  width:42px;
  height:30px;
  background:#464646;
  border-radius: 45px;
  transform: rotateZ(-55deg) scaleX(.9);
  -ms-transform: rotateZ(-55deg) scaleX(.9);
  -moz-transform: rotateZ(-55deg) scaleX(.9);
  -webkit-transform: rotateZ(-55deg) scaleX(.9);
  z-index:4;
}

#weight:before{
  position:absolute;
  top:0px;
  left:0px;
  width:30px;
  height:30px;
  background:#1a1a1a;
  border-radius: 45px;
  content:'';
}

#weight:after{
  position:absolute;
  top:3px;
  left:-1px;
  width:24px;
  height:24px;
  background:transparent;
  border-radius: 45px;
  box-shadow:3px 0px #464646;
  content:'';
}

#head{
  position:absolute;
  top:161px;
  left:424px;
  width: 20px;
  height:30px;
  background:#1a1a1a;
  border-radius:5px 10px 0 0;
  transform: rotateZ(10deg) skewX(-25deg);
  -ms-transform: rotateZ(10deg) skewX(-25deg);
  -moz-transform: rotateZ(10deg) skewX(-25deg);
  -webkit-transform: rotateZ(10deg) skewX(-25deg);
  z-index:8;
}

#head:before{
  position:absolute;
  top:-2px;
  left:-2px;
  width:19px;
  height:30px;
  background:#464646;
  border-radius:5px 10px 0 0;
  content:'';
}
#head:after{
  position:absolute;
  top:15px;
  left:17px;
  width:23px;
  height:5px;
  background:#464646;
  box-shadow:2px 1px #1a1a1a;
  content:'';
}

#arm-shadow{
  position:absolute;
  top:150px;
  left:399px;
  width:150px;
  height:9px;
  background:#b8c6db;
  transform: rotateZ(-55deg);
  -ms-transform: rotateZ(-55deg);
  -moz-transform: rotateZ(-55deg);
  -webkit-transform: rotateZ(-55deg);
  z-index:3;
}
#arm-shadow:before{
  position:absolute;
  top:-9px;
  left:0px;
  width:19px;
  height:28px;
  background:#b8c6db;
  border-radius:5px 10px 0 0;
  transform: rotateZ(65deg) skewX(-25deg);
  -ms-transform: rotateZ(65deg) skewX(-25deg);
  -moz-transform: rotateZ(65deg) skewX(-25deg);
  -webkit-transform: rotateZ(65deg) skewX(-25deg);
  content:'';
}

#arm-shadow:after{
  position:absolute;
  top:15px;
  left:-4px;
  width:30px;
  height:5px;
  background:#b8c6db;
  transform: rotateZ(65deg) skewX(-25deg);
  -ms-transform: rotateZ(65deg) skewX(-25deg);
  -moz-transform: rotateZ(65deg) skewX(-25deg);
  -webkit-transform: rotateZ(65deg) skewX(-25deg);
  content:'';
}

#weight-shadow{
  position:absolute;
  top:43px;
  left:535px;
  width:20px;
  height:25px;
  background:#b8c6db;
  transform: rotateZ(10deg) skewX(-25deg);
  -ms-transform: rotateZ(10deg) skewX(-25deg);
  -moz-transform: rotateZ(10deg) skewX(-25deg);
  -webkit-transform: rotateZ(10deg) skewX(-25deg);
  z-index:3;
}

#weight-shadow:before{
  position:absolute;
  top:4px;
  left:0px;
  width:24px;
  height:13px;
  background:#b8c6db; 
  content:'';
}

#grain1{
  position: absolute;
  top: -16px;
  left: 8px;
  width: 30px;
  height: 60px;
  border: 0 solid transparent;
  border-left: 12px solid #a67967;
  border-radius: 30px 0 0 20px;
  transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}

#grain1:before{
  position:absolute;
  top:25px;
  left:10px;
  width:40px;
  height:40px;
  border-top:5px solid #b98b79;
  border-radius:40px;
  transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  content:'';
}

#grain1:after{
  position:absolute;
  top:-3px;
  left:-15px;
  width:40px;
  height:40px;
  border-top:3px solid #a67967;
  border-radius:40px;
  transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  content:'';
}

#grain2{
  position: absolute;
  top: 0px;
  left: 35px;
  width: 50px;
  height: 50px;
  border-left: 5px solid #b98b79;
  border-radius: 50px;
  transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
}

#grain2:before{
  position: absolute;
  top: 0px;
  left: -13px;
  width: 50px;
  height: 50px;
  border-left: 5px solid #b98b79;
  border-radius: 50px;
  content:'';
}

#grain2:after{
  position: absolute;
  top: -10px;
  left: -23px;
  width: 70px;
  height: 70px;
  border-left: 5px solid #a67967;
  border-top: 7px solid #a67967;
  border-radius: 50px;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  content:'';
}

#grain3{
  position: absolute;
  top: 0px;
  left: 100px;
  width: 90px;
  height: 50px;
  border-right: 8px solid #b98b79;
  border-top: 6px solid #b98b79;
  border-radius: 50px;
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
}

#grain3:before{
  position: absolute;
  top: -20px;
  left: 40px;
  width: 50px;
  height: 50px;
  border-top: 5px solid #a67967;
  border-right: 5px solid #a67967;
  border-radius: 50px;
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  content:'';
}

#grain3:after{
  position: absolute;
  top: -30px;
  left: 45px;
  width: 50px;
  height: 60px;
  border-top: 2px solid #a67967;
  border-right: 9px solid #a67967;
  border-radius: 50px;
  transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  content:'';
}

#grain4{
  position: absolute;
  top: 15px;
  left: 200px;
  width: 110px;
  height: 110px;
  border: 5px solid #a67967;
  border-radius: 100px;
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
}

#grain4:before{
  position: absolute;
  top: -25px;
  left: -30px;
  width: 140px;
  height: 140px;
  border-top: 7px solid #b98b79;
  border-radius: 100px;
  transform: rotate(25deg) rotateZ(-10deg) skewX(-10deg);
  -ms-transform: rotate(25deg) rotateZ(-10deg) skewX(-10deg);
  -moz-transform: rotate(25deg) rotateZ(-10deg) skewX(-10deg);
  -webkit-transform: rotate(25deg) rotateZ(-10deg) skewX(-10deg);
  content:'';
}

#grain4:after{
  position: absolute;
  top: -35px;
  left: -20px;
  width: 140px;
  height: 140px;
  border-top: 5px solid #a67967;
  border-radius: 100px;
  transform: rotate(20deg) rotateZ(-10deg) skewX(0deg);
  -ms-transform: rotate(20deg) rotateZ(-10deg) skewX(0deg);
  -moz-transform: rotate(20deg) rotateZ(-10deg) skewX(0deg);
  -webkit-transform: rotate(20deg) rotateZ(-10deg) skewX(0deg);
  content:'';
}

#grain5{
  position: absolute;
  top: -5px;
  left: 270px;
  width: 60px;
  height: 40px;
  border-top: 6px solid #a67967;
  border-right: 6px solid #a67967;
  border-radius: 12px;
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
}

#grain5:before{
  position: absolute;
  top: -20px;
  left: 30px;
  width: 80px;
  height: 40px;
  border-top: 4px solid #a67967;
  border-right: 6px solid #a67967;
  border-radius: 12px;
  transform: rotate(-13deg) skewX(-25deg);
  -ms-transform: rotate(-13deg) skewX(-25deg);
  -moz-transform: rotate(-13deg) skewX(-25deg);
  -webkit-transform: rotate(-13deg) skewX(-25deg);
  content:'';
}

#grain5:after{
  position: absolute;
  top: -15px;
  left: 0px;
  width: 100px;
  height: 40px;
  border-top: 8px solid #b98b79;
  border-right: 5px solid #b98b79;
  border-radius: 20px;
  transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  content:'';
}

#grain6{
  position: absolute;
  top: 10px;
  left: 395px;
  width: 20px;
  height: 40px;
  border-top: 6px solid #a67967;
  border-right: 7px solid #a67967;
  border-radius: 0px 20px 20px 0;
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
}

#grain6:before{
  position:absolute;
  top:-35px;
  left:-28px;
  width:30px;
  height:30px;
  border-bottom: 6px solid #a67967;
  border-radius:0 30px;
  content:'';
}

#grain7{
  position: absolute;
  top: 25px;
  left: 2px;
  width: 40px;
  height: 40px;
  border-top: 8px solid #a67967;
  border-radius: 20px 20px 20px 0;
  transform: skewY(-50deg);
  -ms-transform: skewY(-50deg);
  -moz-transform: skewY(-50deg);
  -webkit-transform: skewY(-50deg);
}

#grain7:before{
  position: absolute;
  top: -15px;
  left: 0px;
  width: 40px;
  height: 40px;
  border-top: 4px solid #a67967;
  border-radius: 20px 20px 20px 0;
  content:'';
}

#grain7:after{
  position: absolute;
  top: -29px;
  left: 2px;
  width: 40px;
  height: 40px;
  border-top: 6px solid #b98b79;
  border-radius: 20px 20px 20px 0;
  content:'';
}

#grain8{
  position: absolute;
  top: 35px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-top: 4px solid #a67967;
  border-radius: 100px;
  transform:skewY(-58deg) skewX(-15deg);
  -ms-transform: skewY(-58deg) skewX(-15deg);
  -moz-transform: skewY(-58deg) skewX(-15deg);
  -webkit-transform: skewY(-58deg) skewX(-15deg);
}

#grain8:before{
  position: absolute;
  top: 2px;
  left: -7px;
  width: 150px;
  height: 150px;
  border-top: 6px solid #a67967;
  border-radius: 100px;
  content:'';
}

#grain9{
  position: absolute;
  top: 88px;
  left: -8px;
  width: 40px;
  height: 40px;
  border-top: 5px solid #a67967;
  border-right: 6px solid #a67967;
  border-radius: 40px 40px 0px 40px;
  transform:skewY(-50deg) skewX(-15deg) scaleX(.7) rotateZ(-40deg);
  -ms-transform: skewY(-50deg) skewX(-15deg) scaleX(.7) rotateZ(-40deg);
  -moz-transform: skewY(-50deg) skewX(-15deg) scaleX(.7) rotateZ(-40deg);
  -webkit-transform: skewY(-50deg) skewX(-15deg) scaleX(.7) rotateZ(-40deg);
}

#grain9:before{
  position: absolute;
  top: 5px;
  left: -8px;
  width: 40px;
  height: 50px;
  border-top: 5px solid #b98b79;
  border-radius: 40px 40px 0px 40px;
  transform:rotateZ(40deg) scaleX(1.2);
  -ms-transform:rotateZ(40deg) scaleX(1.2);
  -moz-transform:rotateZ(40deg) scaleX(1.2);
  -webkit-transform:rotateZ(40deg) scaleX(1.2);
  content:'';
}

#grain10{
  position: absolute;
  top: 132px;
  left: 3px;
  width: 40px;
  height: 40px;
  border-top: 7px solid #a67967;
  border-left: 7px solid #a67967;
  border-radius: 15px 0px 0px 0px;
  transform:skewY(-48deg) skewX(-15deg) rotateZ(25deg);
  -ms-transform:skewY(-48deg) skewX(-15deg) rotateZ(25deg);
  -moz-transform:skewY(-48deg) skewX(-15deg) rotateZ(25deg);
  -webkit-transform:skewY(-48deg) skewX(-15deg) rotateZ(25deg);
}

#grain10:before{
  position: absolute;
  top: -27px;
  left: -14px;
  width: 40px;
  height: 40px;
  border-top: 3px solid #a67967;
  border-left: 3px solid #a67967;
  border-radius: 25px 0px 0px 0px;
  transform:rotateZ(3deg);
  -ms-transform:rotateZ(3deg);
  -moz-transform:rotateZ(3deg);
  -webkit-transform:rotateZ(3deg);
  content:'';
}

#grain11{
  position: absolute;
  top: 175px;
  left: -3px;
  width: 40px;
  height: 40px;
  border-top: 5px solid #b98b79;
  border-left: 7px solid #b98b79;
  border-radius: 15px 0px 0px 0px;
  transform:skewY(-48deg) skewX(-10deg) rotateZ(30deg);
  -ms-transform:skewY(-48deg) skewX(-10deg) rotateZ(30deg);
  -moz-transform:skewY(-48deg) skewX(-10deg) rotateZ(30deg);
  -webkit-transform:skewY(-48deg) skewX(-10deg) rotateZ(30deg);
}

#grain11:before{
  position: absolute;
  top: 1px;
  left: 5px;
  width: 40px;
  height: 40px;
  border-top: 3px solid #a67967;
  border-left: 3px solid #a67967;
  border-radius: 10px 0px 0px 0px;
  content:'';
  transform:skewX(10deg) rotateZ(-8deg);
  -ms-transform:skewX(10deg) rotateZ(-8deg);
  -moz-transform:skewX(10deg) rotateZ(-8deg);
  -webkit-transform:skewX(10deg) rotateZ(-8deg);
}

#grain11:after{
  position: absolute;
  top: 20px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-top: 3px solid #a67967;
  border-left: 3px solid #a67967;
  border-radius: 20px 0px 0px 0px;
  content:'';
  transform:skewX(10deg) rotateZ(-10deg);
  -ms-transform:skewX(10deg) rotateZ(-10deg);
  -moz-transform:skewX(10deg) rotateZ(-10deg);
  -webkit-transform:skewX(10deg) rotateZ(-10deg);
}

#inspired{
  font-family: 'Quicksand', sans-serif;
  color:#fff;
  font-size:24px;
}

#inspired a{
  color:#464646;
  text-decoration:none;
}

/* keyframes for wheel animation;  simple 0 to 360 */
@keyframes spin {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}
@-ms-keyframes spin {
  from { -ms-transform: rotateZ(0deg); }
  to { -ms-transform: rotateZ(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotateZ(0deg); }
  to { -webkit-transform: rotateZ(360deg); }
}
</style>