CSS3 文字立体翻转效果
分类:实例代码
分享一段代码实例,它实现了鼠标悬浮,文本能够实现立体翻转效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #cccccc; } .box{ width: 600px; margin: 100px auto; } span{ display: inline-block; width: 100px; height: 100px; font-size: 100px; font-family: 'microsoft yahei'; margin-right: 40px; float: left; position: relative; } span::before, span::after{ content:attr(data-text); position: absolute; left: 0; top: 0; color: rgba(0,0,0,.3); transform-origin: left center; transform: scale(0.95,1); transition: transform 0.5s; } span::after{ color: #ffffff; } div:hover span::after{ transform: rotateY(40deg) skew(0deg,10deg) scale(0.95,1); } div:hover span::before{ transform: skew(0deg,25deg) scale(0.95,1); } </style> </head> <body> <div class="box"> <span data-text="蚂">蚂</span> <span data-text="蚁">蚁</span> <span data-text="部">部</span> <span data-text="落">落</span> </div> </body> </html>
CSS3 文字立体翻转效果,这样的场景在实际项目中还是用的比较多的,关于CSS3 文字立体翻转效果就介绍到这了。
CSS3 文字立体翻转效果属于前端实例代码,有关更多实例代码大家可以查看。