您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“css3中如何实现图形3d翻转效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3中如何实现图形3d翻转效果”吧！
代码如下：
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>css3 3d rotate</title> <style type="text/css"> body,div,ul,li{ padding:0; margin:0; } .container ul li { height: 180px; width: 180px; margin-right: 20px; margin-bottom: 20px; display: inline; -webkit-perspective: 1000px; -moz-perspective: 1000px; float: left; } .out_box{ position: relative; height: 180px; width: 180px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .out_box div{ display: block; height: 180px; width: 180px; position: absolute; left: 0; top: 0; background: #060; text-align: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; color:#FFF; line-height:180px; font-size:16px; } .out_box .front_box{ z-index: 2; } .out_box .back_box{ z-index: 1; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .container ul li:hover .out_box{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .container ul li:hover .back_box{ z-index: 3; } </style> </head> <body> <div class="container"> <ul> <li> <div class="out_box"> <div class="front_box">front</div> <div class="back_box">back</div> </div> </li> <li> <div class="out_box"> <div class="front_box">front2</div> <div class="back_box">back2</div> </div> </li> <li> <div class="out_box"> <div class="front_box">front3</div> <div class="back_box">back3</div> </div> </li> </ul> </div> </body> </html>感谢各位的阅读，以上就是“css3中如何实现图形3d翻转效果”的内容了，经过本文的学习后，相信大家对css3中如何实现图形3d翻转效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。