效果圖如下：
示例代碼：
<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> <div id="stage"> <div class="cube"> <div class="side front"><img src="6.gif" alt="" /></div> <div class="side back"><img src="2.jpg" alt="" /></div> <div class="side left"><img src="3.jpg" alt="" /></div> <div class="side right"><img src="4.jpg" alt="" /></div> <div class="side top"><img src="5.jpg" alt="" /></div> <div class="side bottom"><img src="1.jpg" alt="" /></div> </div> </div> </body></html>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
