<! 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 93', 'blackoak Std ', Courier, Arial; color: #7e9409; position: absolute; top: 85px; left: 10px; width: 300px;-moz-animation: 1 s slidein;-webkit-animation: 1 s 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 2 s transfer-in-out 0 s;-webkit-transition: all 2 s transfer-in-out 0; transition: all 2 s records-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> CSS3 3D text Animation
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]