效果圖如下：
示例代碼：
| <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> |
