如何css制作3d旋转立方体效果
如何css制作3d旋转立方体效果
肥皂起泡泡浏览 523回答 3
3回答
-
饮歌长啸
<style> *{ margin:0px; padding:0px; } .box{ width:200px; margin:200px auto; perspective:800px; } .cube{ position:relative; width:200px;height:200px; transform-style:preserve-3d; transform:rotateY(0deg); transition:2s; } .cube div{ position:absolute; width:200px; height:200px; border:2px solid red; text-align:center; line-height:200px; font-size:30px; opacity:0.5; } .cube div:nth-child(1){ /*先旋转90度再往相应的方向移动*/ transform:rotateX(90deg) translateZ(102px); background:#ff33ff; } .cube div:nth-child(2){ transform:rotateX(-90deg) translateZ(102px); background:#99ff99; } .cube div:nth-child(3){ transform:translateZ(102px); background:#ccff33; } .cube div:nth-child(4){ transform:translateZ(-102px); background:#336699; } .cube div:nth-child(5){ transform:rotateY(90deg) translateZ(102px); background:#990033; } .cube div:nth-child(6){ transform:rotateY(-90deg) translateZ(102px); background:#666633; } .cube:hover{ transform:rotateY(360deg); } </style> </head> <body> <div class="box"> <div class="cube"> <div>上</div> <div>下</div> <div>前</div> <div>后</div> <div>左</div> <div>右</div> </div> </div> </body> 资源：http://www.xuniyicheng.com/article/6.jsp
随时随地看视频慕课网APP
相关分类
CSS3