脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5/CSS3(PrefixFree.js) 3D文字特效，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
PrefixFree
<script src="https://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
复制代码
1 <!DOCTYPE html>
2 <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">
3 <head>
4 <;meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <meta charset="UTF-8">
6 <title>HTML5/CSS3 3D文字特效</title>
7 <style>
8 @import url(https://fonts.GOOGLEapis.com/css?family=Lato:900);
9
10 *, *:before, *:after {
11 -moz-box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Lato', sans-serif;
16 }
17
18 p.foo {
19 width: 90%;
20 margin: 0 auto;
21 text-align: center;
22 }
23
24 .letter {
25 display: inline-block;
26 font-weight: 900;
27 font-Size: 8em;
28 margin: 0.2em;
29 position: relative;
30 color: #00B4F1;
31 transform-style: preserve-3d;
32 perspective: 400;
33 z-index: 1;
34 }
35
36 .letter:before, .letter:after {
37 position: absolute;
38 content: attr(data-letter);
39 transform-origin: top left;
40 top: 0;
41 left: 0;
42 }
43
44 .letter, .letter:before, .letter:after {
45 transition: all 0.3s ease-in-out;
46 }
47
48 .letter:before {
49 color: #fff;
50 text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8);
51 z-index: 3;
52 transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
53 }
54
55 .letter:after {
56 color: rgba(0,0,0,.11);
57 z-index: 2;
58 transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg);
59 }
60
61 .letter:hover:before {
62 color: #fafafa;
63 transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
64 }
65
66 .letter:hover:after {
67 transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg);
68 }
69 </style>
70 <script src="https://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
71 </head>
72 <body>
73 <p class="foo">
74 <span class="letter" data-letter="C">C</span>
75 <span class="letter" data-letter="N">N</span>
76 <span class="letter" data-letter="B">B</span>
77 <span class="letter" data-letter="L">L</span>
78 <span class="letter" data-letter="O">O</span>
79 <span class="letter" data-letter="G">G</span>
80 </p>
81 </body>
82 </html>
PrefixFree
<script src="https://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
复制代码
1 <!DOCTYPE html>
2 <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">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <meta charset="UTF-8">
6 <title>HTML5/CSS3 3D文字特效</title>
7 <style>
8 @import url(https://fonts.googleapis.com/css?family=Lato:900);
9
10 *, *:before, *:after {
11 -moz-box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Lato', sans-serif;
16 }
17
18 p.foo {
19 width: 90%;
20 margin: 0 auto;
21 text-align: center;
22 }
23
24 .letter {
25 display: inline-block;
26 font-weight: 900;
27 font-size: 8em;
28 margin: 0.2em;
29 position: relative;
30 color: #00B4F1;
31 transform-style: preserve-3d;
32 perspective: 400;
33 z-index: 1;
34 }
35
36 .letter:before, .letter:after {
37 position: absolute;
38 content: attr(data-letter);
39 transform-origin: top left;
40 top: 0;
41 left: 0;
42 }
43
44 .letter, .letter:before, .letter:after {
45 transition: all 0.3s ease-in-out;
46 }
47
48 .letter:before {
49 color: #fff;
50 text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8);
51 z-index: 3;
52 transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
53 }
54
55 .letter:after {
56 color: rgba(0,0,0,.11);
57 z-index: 2;
58 transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg);
59 }
60
61 .letter:hover:before {
62 color: #fafafa;
63 transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
64 }
65
66 .letter:hover:after {
67 transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg);
68 }
69 </style>
70 <script src="https://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
71 </head>
72 <body>
73 <p class="foo">
74 <span class="letter" data-letter="C">C</span>
75 <span class="letter" data-letter="N">N</span>
76 <span class="letter" data-letter="B">B</span>
77 <span class="letter" data-letter="L">L</span>
78 <span class="letter" data-letter="O">O</span>
79 <span class="letter" data-letter="G">G</span>
80 </p>
81 </body>
82 </html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-HTML5/CSS3(PrefixFree.js) 3D文字特效全部内容，希望文章能够帮你解决html5教程-HTML5/CSS3(PrefixFree.js) 3D文字特效所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。