<!doctype html> <link href= ' http://fonts.googleapis.com/css?family=Ultra&v2 ' rel= ' stylesheet ' type= ' Text/css ' > <style> body{background: #333;} H1{font:normal 90px/1.5 ' Ultra ', ' Curlz MT ', ' Bauhaus ', ' Blackoak Std ', Courier,arial;color: #7e9409;p osition: absolute;top:85px;left:10px;width:300px; -moz-animation:1s Slidein; -webkit-animation:1s Slidein; -webkit-perspective:600; -moz-perspective:600px; } @-moz-keyframes Slidein {from {top:1550px;} 85% {top:5px;} to {top:85px;} } @-webkit-keyframes Slidein {from {top:1550px;} 85% {top:5px;} to {top:85px;} }. Mylogo,.mylogo a{-moz-transition:all 2s ease-in-out 0s; -webkit-transition:all 2s ease-in-out 0; Transition:all 2s ease-in-out 0; }. mylogo{position:relative;display:inline-block;zoom:1;top:0;left:0;text-shadow:-2px-1px 1px #7e9409; opacity:0.8 ; Filter:alpha (OPACITY=50); -webkit-transform:rotatey (30DEG); -moz-transform:rotatey (30DEG); Transform:rotatey (30DEG); } h1:hover. mylogo {/* 3d-transform * *-webkit-transform:rotatey (0); -moz-transform:rotatey (0); Transform:rotatey (0); text-shadow:0; }. Mylogo A{position:absolute;top:1px;left:5px;color: #B7D902; text-shadow:-1px-1px 1px #fff; text-decoration:none;} H1:hover. Mylogo a{left:2px;} </style> <p> <span class= "Mylogo" >css3 3D text animation </span> </p>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]