HTML5/CSS3(PrefixFree.js) 3D文字特效

之前在园子里看到一个HTML5/CSS3的文字特效(这里)，觉得挺好玩的所以小小的研究了下，不过发现代码都是针对webkit以及FF的所以IE跪了。

Runjs

我将示例中的代码进行了精简，后来发现CSS大多数没有前缀，我很费解之后发现它引用过来一个PrefixFree，有了这个js就能不用写CSS3的前缀:)

PrefixFree

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性

background-color: #a0b3d6;
background-image: linear-gradient(top, #beceeb, #34538b);

这样就不需要添加这些前缀太方便来了 ;)

-khtml-     Konqueror

-rim-         RIM

-ms-         Microsoft（IE）

-0-            Opera

-moz-       Mozilla(如Firefox)

-webkit-   Webkit

 <!DOCTYPE html>
 <html style="" class=" -moz- js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
 <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta charset="UTF-8">
     <title>HTML5/CSS3 3D文字特效</title>
     <style>
         @import url(http://fonts.googleapis.com/css?family=Lato:900);

         *, *:before, *:after {
             -moz-box-sizing: border-box;
         }

         body {
             font-family: 'Lato', sans-serif;
         }

         div.foo {
             width: 90%;
             margin: 0 auto;
             text-align: center;
         }

         .letter {
             display: inline-block;
             font-weight: 900;
             font-size: 8em;
             margin: 0.2em;
             position: relative;
             color: #00B4F1;
             transform-style: preserve-3d;
             perspective: 400;
             z-index: 1;
         }

             .letter:before, .letter:after {
                 position: absolute;
                 content: attr(data-letter);
                 transform-origin: top left;
                 top: 0;
                 left: 0;
             }

             .letter, .letter:before, .letter:after {
                 transition: all 0.3s ease-in-out;
             }

                 .letter:before {
                     color: #fff;
                     text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8);
                     z-index: 3;
                     transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
                 }

                 .letter:after {
                     color: rgba(0,0,0,.11);
                     z-index: 2;
                     transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg);
                 }

                 .letter:hover:before {
                     color: #fafafa;
                     transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
                 }

                 .letter:hover:after {
                     transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg);
                 }
     </style>
     <script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
 </head>
 <body>
     <div class="foo">
         <span class="letter" data-letter="C">C</span>
         <span class="letter" data-letter="N">N</span>
         <span class="letter" data-letter="B">B</span>
         <span class="letter" data-letter="L">L</span>
         <span class="letter" data-letter="O">O</span>
         <span class="letter" data-letter="G">G</span>
     </div>
 </body>
 </html>

完整代码

Runjs演示

特效原文地址