CSS3 3D Transformation

HTML

<h1>Pure CSS3 3D Icons - Using Font Awesome 4.7
</h1>
<div class=“icon-block”>
  <i class=“fa fa-film fa-5 fa-3dicon”>
  </i>  
  <i class=“fa fa-briefcase fa-5 fa-3dicon”>
  </i> 
  <i class=“fa fa-camera-retro fa-5 fa-3dicon”>
  </i> 
  <i class=“fa fa-flash fa-5 fa-3dicon”>
  </i> 
  <i class=“fa fa-info-circle fa-5 fa-3dicon”>
  </i>
</div>
<div class=“icon-block”>
  <i class=“fa fa-android fa-5 fa-3dicon”>
  </i>  
  <i class=“fa fa-info fa-5 fa-3dicon”>
  </i> 
  <i class=“fa fa-home fa-5 fa-3dicon”>
  </i> 
  <i class=“fa fa-dollar fa-5 fa-3dicon”>
  </i> 
  <i class=“fa fa-lock fa-5 fa-3dicon”>
  </i>
</div>
<br />
<a rel=“nofollow” rel="noreferrer"class=“copy” href=“http://www.webmanajemen.com”>wwww.webmanajemen.com
</a>

CSS

,:before,*:after{box-sizing:border-box}body{margin:0;font-family:sans-serif;font-size:14px;line-height:1.8em;overflow-y:auto;text-align:center;background:#409cc7;padding:0;position:relative}h1{color:#FFF;text-shadow:1px 1px 1px #000}.fa-5{font-size:8em}.icon-block .fa-3dicon{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;-o-perspective:1000px;perspective:1000px;-webkit-animation-name:rotate;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:rotate;-moz-animation-duration:3s;-moz-animation-timing-function:linear;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;-o-animation-name:rotate;-o-animation-duration:3s;-o-animation-timing-function:linear;-o-animation-iteration-count:infinite;-o-animation-fill-mode:both;-ms-animation-name:rotate;-ms-animation-duration:3s;-ms-animation-timing-function:linear;-ms-animation-iteration-count:infinite;-ms-animation-fill-mode:both;animation-name:rotate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;color:#25405d;margin:30px}@-webkit-keyframes rotate{0{text-shadow:1px 1px 1px #CCC;-webkit-transform:rotateY(0)}25%{text-shadow:1px 1px 1px #CCC,-2px 1px 1px #CCC,-3px 1px 1px #CCC,-4px 1px 1px #CCC,-4px 1px 1px #CCC,-5px 1px 1px #CCC,-6px 1px 1px #CCC,-7px 1px 1px #CCC,-8px 1px 1px #CCC,-9px 1px 1px #CCC,-10px 1px 1px #CCC,-11px 1px 1px #CCC,-12px 1px 1px #CCC,-13px 1px 1px #CCC,-14px 1px 1px #CCC,-15px 1px 1px #CCC,-16px 1px 1px #CCC,-17px 1px 1px #CCC,-18px 1px 1px #CCC,-19px 1px 1px #CCC,-20px 1px 1px #CCC;-webkit-transform:rotateY(40deg)}50%{text-shadow:0 0 0 #CCC;-webkit-transform:rotateY(0)}75%{text-shadow:1px 1px 1px #CCC,2px 1px 1px #CCC,3px 1px 1px #CCC,4px 1px 1px #CCC,4px 1px 1px #CCC,5px 1px 1px #CCC,6px 1px 1px #CCC,7px 1px 1px #CCC,8px 1px 1px #CCC,9px 1px 1px #CCC,10px 1px 1px #CCC,11px 1px 1px #CCC,12px 1px 1px #CCC,13px 1px 1px #CCC,14px 1px 1px #CCC,15px 1px 1px #CCC,16px 1px 1px #CCC,17px 1px 1px #CCC,18px 1px 1px #CCC,19px 1px 1px #CCC,20px 1px 1px #CCC;-webkit-transform:rotateY(-40deg)}100%{text-shadow:1px 1px 1px #CCC;-webkit-transform:rotateY(0)}}@-moz-keyframes rotate{0{text-shadow:1px 1px 1px #CCC;-moz-transform:rotateY(0)}25%{text-shadow:1px 1px 1px #CCC,-2px 1px 1px #CCC,-3px 1px 1px #CCC,-4px 1px 1px #CCC,-4px 1px 1px #CCC,-5px 1px 1px #CCC,-6px 1px 1px #CCC,-7px 1px 1px #CCC,-8px 1px 1px #CCC,-9px 1px 1px #CCC,-10px 1px 1px #CCC,-11px 1px 1px #CCC,-12px 1px 1px #CCC,-13px 1px 1px #CCC,-14px 1px 1px #CCC,-15px 1px 1px #CCC,-16px 1px 1px #CCC,-17px 1px 1px #CCC,-18px 1px 1px #CCC,-19px 1px 1px #CCC,-20px 1px 1px #CCC;-moz-transform:rotateY(40deg)}50%{text-shadow:0 0 0 #CCC;-moz-transform:rotateY(0)}75%{text-shadow:1px 1px 1px #CCC,2px 1px 1px #CCC,3px 1px 1px #CCC,4px 1px 1px #CCC,4px 1px 1px #CCC,5px 1px 1px #CCC,6px 1px 1px #CCC,7px 1px 1px #CCC,8px 1px 1px #CCC,9px 1px 1px #CCC,10px 1px 1px #CCC,11px 1px 1px #CCC,12px 1px 1px #CCC,13px 1px 1px #CCC,14px 1px 1px #CCC,15px 1px 1px #CCC,16px 1px 1px #CCC,17px 1px 1px #CCC,18px 1px 1px #CCC,19px 1px 1px #CCC,20px 1px 1px #CCC;-moz-transform:rotateY(-40deg)}100%{text-shadow:1px 1px 1px #CCC;-moz-transform:rotateY(0)}}@-o-keyframes rotate{0{text-shadow:1px 1px 1px #CCC;-o-transform:rotateY(0)}25%{text-shadow:1px 1px 1px #CCC,-2px 1px 1px #CCC,-3px 1px 1px #CCC,-4px 1px 1px #CCC,-4px 1px 1px #CCC,-5px 1px 1px #CCC,-6px 1px 1px #CCC,-7px 1px 1px #CCC,-8px 1px 1px #CCC,-9px 1px 1px #CCC,-10px 1px 1px #CCC,-11px 1px 1px #CCC,-12px 1px 1px #CCC,-13px 1px 1px #CCC,-14px 1px 1px #CCC,-15px 1px 1px #CCC,-16px 1px 1px #CCC,-17px 1px 1px #CCC,-18px 1px 1px #CCC,-19px 1px 1px #CCC,-20px 1px 1px #CCC;-o-transform:rotateY(40deg)}50%{text-shadow:0 0 0 #CCC;-o-transform:rotateY(0)}75%{text-shadow:1px 1px 1px #CCC,2px 1px 1px #CCC,3px 1px 1px #CCC,4px 1px 1px #CCC,4px 1px 1px #CCC,5px 1px 1px #CCC,6px 1px 1px #CCC,7px 1px 1px #CCC,8px 1px 1px #CCC,9px 1px 1px #CCC,10px 1px 1px #CCC,11px 1px 1px #CCC,12px 1px 1px #CCC,13px 1px 1px #CCC,14px 1px 1px #CCC,15px 1px 1px #CCC,16px 1px 1px #CCC,17px 1px 1px #CCC,18px 1px 1px #CCC,19px 1px 1px #CCC,20px 1px 1px #CCC;-o-transform:rotateY(-40deg)}100%{text-shadow:1px 1px 1px #CCC;-o-transform:rotateY(0)}}@keyframes rotate{0{text-shadow:1px 1px 1px #CCC;transform:rotateY(0)}25%{text-shadow:1px 1px 1px #CCC,-2px 1px 1px #CCC,-3px 1px 1px #CCC,-4px 1px 1px #CCC,-4px 1px 1px #CCC,-5px 1px 1px #CCC,-6px 1px 1px #CCC,-7px 1px 1px #CCC,-8px 1px 1px #CCC,-9px 1px 1px #CCC,-10px 1px 1px #CCC,-11px 1px 1px #CCC,-12px 1px 1px #CCC,-13px 1px 1px #CCC,-14px 1px 1px #CCC,-15px 1px 1px #CCC,-16px 1px 1px #CCC,-17px 1px 1px #CCC,-18px 1px 1px #CCC,-19px 1px 1px #CCC,-20px 1px 1px #CCC;transform:rotateY(40deg)}50%{text-shadow:0 0 0 #CCC;transform:rotateY(0)}75%{text-shadow:1px 1px 1px #CCC,2px 1px 1px #CCC,3px 1px 1px #CCC,4px 1px 1px #CCC,4px 1px 1px #CCC,5px 1px 1px #CCC,6px 1px 1px #CCC,7px 1px 1px #CCC,8px 1px 1px #CCC,9px 1px 1px #CCC,10px 1px 1px #CCC,11px 1px 1px #CCC,12px 1px 1px #CCC,13px 1px 1px #CCC,14px 1px 1px #CCC,15px 1px 1px #CCC,16px 1px 1px #CCC,17px 1px 1px #CCC,18px 1px 1px #CCC,19px 1px 1px #CCC,20px 1px 1px #CCC;transform:rotateY(-40deg)}100%{text-shadow:1px 1px 1px #CCC;transform:rotateY(0)}}.copy{text-shadow:1px 1px 1px #333;color:#FFF}

DEMO:

See the pen on CodePen.



Incoming Terms: Pure CSS3 3D Animation | CSS3 3D Icon | Fontawesome 3D Icon | Fontawesome 4.7.0 3D Animated Icon | Fontawesome | 3D Icon | Animated 3D icon | Pure CSS3 3D