这篇文章主要给大家介绍了利用CSS3制作简单的3d半透明立方体图片展示的相关资料,文中给出了完整的示例代码,对大家的理解和学习具有一定的参考价值,需要的朋友们下面来一起看看吧。
效果图如下:
示例代码:
<html> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta charset="utf-8"/> <style type="text/css"> //css部分 html{ font-size:62.5%; } img{ width:300px; height:300px; } #stage{ //搭建一个舞台 margin-top:200px; margin-left:auto; margin-right:auto; width:300px; height:300px; perspective:1200px; font-size:5em; font-weight:bold; color:#cc00ff; } .cube{ //cube是正方体 position:relative; transform:rotateX(-45deg) rotateY(45deg); transform-style:preserve-3d; transition: all .6s; } .side{ color:blue; text-align:center; width:300px; height:300px; line-height:300px; position:absolute; background:#cc66ff; opacity:0.5; border:1px solid rgba(117,4,24,0.5); } //.front到.bottom是6个面分别进行旋转,构建出正方体的整形 .front{ transform:translateZ(150px); } .back{ transform:rotateY(180deg) translateZ(150px); } .left{ transform:rotateY(-90deg) translateZ(150px); } .right{ transform:rotateY(90deg) translateZ(150px); } .top{ transform:rotateX(90deg) translateZ(150px); } .bottom{ transform:rotatex(-90deg) translateZ(150px); } #stage:hover .cube{ //设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度 transform:rotateX(-45deg) rotateY(225deg); transition:transform .6s; } </style> </head> <body> <p id="stage"> <p class="cube"> <p class="side front"><img src="6.gif" alt="" /></p> <p class="side back"><img src="2.jpg" alt="" /></p> <p class="side left"><img src="3.jpg" alt="" /></p> <p class="side right"><img src="4.jpg" alt="" /></p> <p class="side top"><img src="5.jpg" alt="" /></p> <p class="side bottom"><img src="1.jpg" alt="" /></p> </p> </p> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上就是如何利用CSS3制作简单的3d半透明立方体图片的详细内容,更多请关注php中文网其它相关文章!
已抢62156个
抢已抢110831个
抢已抢46745个
抢已抢133558个
抢已抢32323个
抢