基于css3的文字3D翻转特效

一款基于css3的文字3D翻转特效。这款特效当鼠标经过文字的时候3D翻转显示阴影。效果图如下：

在线预览

基于css3的文字3D翻转特效.rar

实现的代码。

html代码：

1. <div class="component">
   
2.             <ul class="grid">
   
3.                 <li>
   
4.                     <div class="codrops-header">
   
5.                         <h1>
   
6.                             Animated Opening Type</h1>
   
7.                     </div>
   
8.                 </li>
   
9.                 <li class="ot-letter-left"><span data-letter="C">C</span></li>
   
10.                 <li class="ot-letter-top"><span data-letter="J">J</span></li>
    
11.                 <li class="ot-letter-right"><span data-letter="8">8</span></li>
    
12.                 <li class="ot-letter-bottom"><span data-letter="A">A</span></li>
    
13.                 <li class="ot-letter-left"><span data-letter="O">O</span></li>
    
14.                 <li class="ot-letter-left"><span data-letter="Q">Q</span></li>
    
15.                 <li class="ot-letter-right"><span data-letter="S">S</span></li>
    
16.                 <li class="ot-letter-left"><span data-letter="B">B</span></li>
    
17.                 <li class="ot-letter-top"><span data-letter="L">L</span></li>
    
18.                 <li class="ot-letter-right"><span data-letter="T">T</span></li>
    
19.                 <li class="ot-letter-left"><span data-letter="K">K</span></li>
    
20.                 <li class="ot-letter-top"><span data-letter="S">S</span></li>
    
21.                 <li class="ot-letter-left"><span data-letter="Z">Z</span></li>
    
22.                 <li class="ot-letter-top"><span data-letter="3">3</span></li>
    
23.                 <li class="ot-letter-right"><span data-letter="D">D</span></li>
    
24.                 <li class="ot-letter-bottom"><span data-letter="I">I</span></li>
    
25.                 <li class="ot-letter-right"><span data-letter="H">H</span></li>
    
26.                 <li class="ot-letter-bottom"><span data-letter="Q">Q</span></li>
    
27.                 <li class="ot-letter-right"><span data-letter="E">E</span></li>
    
28.                 <li class="ot-letter-left"><span data-letter="A">A</span></li>
    
29.                 <li class="ot-letter-top"><span data-letter="P">P</span></li>
    
30.                 <li class="ot-letter-right"><span data-letter="F">F</span></li>
    
31.                 <li class="ot-letter-left"><span data-letter="S">S</span></li>
    
32.                 <li class="ot-letter-top"><span data-letter="K">K</span></li>
    
33.                 <li class="ot-letter-left"><span data-letter="U">U</span></li>
    
34.                 <li class="ot-letter-top"><span data-letter="L">L</span></li>
    
35.                 <li class="ot-letter-right"><span data-letter="6">6</span></li>
    
36.                 <li class="ot-letter-bottom"><span data-letter="R">R</span></li>
    
37.                 <li class="ot-letter-left"><span data-letter="O">O</span></li>
    
38.                 <li class="ot-letter-bottom"><span data-letter="V">V</span></li>
    
39.                 <li class="ot-letter-right"><span data-letter="S">S</span></li>
    
40.                 <li class="ot-letter-left"><span data-letter="Q">Q</span></li>
    
41.                 <li class="ot-letter-top"><span data-letter="J">J</span></li>
    
42.                 <li class="ot-letter-right"><span data-letter="G">G</span></li>
    
43.                 <li class="ot-letter-left"><span data-letter="R">R</span></li>
    
44.             </ul>
    
45.         </div>

复制代码via：http://www.w2bc.com/Article/20004

【基于css3的文字3D翻转特效】相关文章

1. 基于css3的文字3D翻转特效

2. 手机版百度首页推情人节特效，HTML5＋CSS3 实现网页3D翻转

3. CSS3 animate实现图片墙3D翻转效果

4. 纯css3 transforms 3D文字翻开翻转3D开放式效果

5. 类似 Google Tips 页面的卡片式提示和翻转特效

6. CSS3的文字阴影—Text-Shadow

7. CSS3 3D镂空文字特效

8. 一款基于jquery和css3的头像恶搞特效

9. HTML5画布下js的文字云/标签云效果 - D3 Cloud

10. MixItUp:基于CSS3 & jQuery的过滤和排序插件

本文来源：https://www.51html5.com/a1074.html