CSS3 achieves 3D text animation effect _ special text effects

CSS33D text animation is shocked to see this word. By the way, it uses another two attributes: transition and animation. Because CSS3 technology is used, use Firefox, Chrome, and other browsers during testing. Otherwise, the effect cannot be seen.

<! 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]