Pure CSS3 3D Icons Using Font Awesome 4.7.0

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.web-development.cf">wwww.web-development.cf
</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:



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

Subscribe to receive free email updates:

0 Response to "Pure CSS3 3D Icons Using Font Awesome 4.7.0"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.