一款基于css3的文字3d翻转特效。这款特效当鼠标经过文字的时候3d翻转显示阴影。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
立即学习“前端免费学习笔记（深入）”；
<div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </div> </li> <li class="ot-letter-left"><span data-letter="C">C</span></li> <li class="ot-letter-top"><span data-letter="J">J</span></li> <li class="ot-letter-right"><span data-letter="8">8</span></li> <li class="ot-letter-bottom"><span data-letter="A">A</span></li> <li class="ot-letter-left"><span data-letter="O">O</span></li> <li class="ot-letter-left"><span data-letter="Q">Q</span></li> <li class="ot-letter-right"><span data-letter="S">S</span></li> <li class="ot-letter-left"><span data-letter="B">B</span></li> <li class="ot-letter-top"><span data-letter="L">L</span></li> <li class="ot-letter-right"><span data-letter="T">T</span></li> <li class="ot-letter-left"><span data-letter="K">K</span></li> <li class="ot-letter-top"><span data-letter="S">S</span></li> <li class="ot-letter-left"><span data-letter="Z">Z</span></li> <li class="ot-letter-top"><span data-letter="3">3</span></li> <li class="ot-letter-right"><span data-letter="D">D</span></li> <li class="ot-letter-bottom"><span data-letter="I">I</span></li> <li class="ot-letter-right"><span data-letter="H">H</span></li> <li class="ot-letter-bottom"><span data-letter="Q">Q</span></li> <li class="ot-letter-right"><span data-letter="E">E</span></li> <li class="ot-letter-left"><span data-letter="A">A</span></li> <li class="ot-letter-top"><span data-letter="P">P</span></li> <li class="ot-letter-right"><span data-letter="F">F</span></li> <li class="ot-letter-left"><span data-letter="S">S</span></li> <li class="ot-letter-top"><span data-letter="K">K</span></li> <li class="ot-letter-left"><span data-letter="U">U</span></li> <li class="ot-letter-top"><span data-letter="L">L</span></li> <li class="ot-letter-right"><span data-letter="6">6</span></li> <li class="ot-letter-bottom"><span data-letter="R">R</span></li> <li class="ot-letter-left"><span data-letter="O">O</span></li> <li class="ot-letter-bottom"><span data-letter="V">V</span></li> <li class="ot-letter-right"><span data-letter="S">S</span></li> <li class="ot-letter-left"><span data-letter="Q">Q</span></li> <li class="ot-letter-top"><span data-letter="J">J</span></li> <li class="ot-letter-right"><span data-letter="G">G</span></li> <li class="ot-letter-left"><span data-letter="R">R</span></li> </ul> </div>
via：http://www.w2bc.com/Article/20004
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
830
收藏
