Pure CSS3 3D Icons Using Font Awesome 4.7.0

By Anonymous -
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

Comments

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.

Popular posts from this blog

Find Backlink From Google Dork

By -
Image
Forum Backlink Dork inurl:"member.php?u=" inurl:"index.php?showuser=" inurl:"smf/index.php?action=profile;u=" inurl:"index.php?action=profile" inurl:"profile.php?mode=viewprofile&u=" inurl:"profile.php?id=" "member.php?u=" "index.php?showuser=" "Invision Power Board" "smf/index.php?action=profile;u=" "index.php?action=profile" "profile.php?mode=viewprofile&u=" "profile.php?id=" "Powered by PunBB" "Powered by SMF" "PHPBB" "Powered by phpBB" inurl:"member.php?u=" inurl:"index.php?showuser=" inurl:"smf/index.php?action=profile;u=" inurl:"index.php?action=profile" forumphorumadd topicnew topicphpbbyabbipbpostingadd messagesend messagepost new topicnew threadsend threadvbulletinbbs intext:"powered by vbulletin" intext:"powered by yabb" intext:...
Read more

List of weapon buff materials, effects and how it can be durango wild lands

By -
Image
Weapons are one of the most important elements in durango games, whatever we do in the game definitely requires weapons. whether it's fighting, taming dinosaurs, collecting materials to make items done with weapons and tools. therefore almost most of the durango players end up choosing wpc as their main job. but there are many things you need to know in making weapons, one of them is a buff. there are many types of buffs for weapons in this game, all buffs are divided into 3 ie buff (marked in yellow) debuff (marked by ash) rare buff (marked in green). well this time we will discuss the yellow and gray buff, for the green buff I have previously discussed so you can directly read it by clicking the link below. Read: Type of green buffer type and its effect durango wild lands Buff from raw materials ...
Read more

Install deb package via Termux

By -
Image
Packages are manually installed via the dpkg command (Debian Package Management System). dpkg is the backend to commands like apt-get and aptitude , which in turn are the backend for GUI install apps like the Software Center and Synaptic. Something along the lines of: dpkg --> apt-get , aptitude --> Synaptic, Software Center But of course the easiest ways to install a package would be, first, the GUI apps (Synaptic, Software Center, etc..), followed by the terminal commands apt-get and aptitude that add a very nice user friendly approach to the backend dpkg, including but not limited to packaged dependencies, control over what is installed, needs update, not installed, broken packages, etc.. Lastly the dpkg command which is the base for all of them. Since dpkg is the base, you can use it to install packaged directly from the command line. Install a package sudo dpkg -i DEB_PACKAGE For ...
Read more