CSS3立方体3D旋转效果
分类:实例代码
CSS3立方体3D旋转效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了立方体3D旋转效果。
里面涉及到一些常用的CSS3属性,感兴趣的朋友可以做一下参考。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #base { font-size: 20pt; font-family: "微软雅黑"; font-weight: bold; width: 300px; height: 300px; border: 1px solid #ccc; margin: 100px auto; -webkit-perspective: 1200px; transform-style: preserve-3d; transform: perspective(0px) rotateX(0deg) rotateY(00deg) rotateZ(0deg); } #outside { width: 200px; height: 200px; position: relative; background-color: #ddd; transform: translateZ(100px); transform-style: preserve-3d; transform-origin: 100px 100px -100px; animation: change 2s linear 0.5s infinite; } #outside > div { width: 200px; height: 200px; text-align: center; line-height: 200px; position: absolute; left: 0px; top: 0px; } #front { background-color: #f00; } #back { background-color: #0f0; transform: translateZ(-200px) rotateY(180deg); } #left { background-color: #00f; transform-origin: left top; transform: rotateY(90deg); } #right { background-color: #ff0; transform-origin: right top; transform: rotateY(90deg) translateX(200px); } #top { background-color: #f0f; transform-origin: left top; transform: rotateX(90deg) translateY(-200px); } #bottom { background-color: #f0f; transform-origin: right bottom; transform: rotateX(90deg); } @keyframes change { from { transform: rotateX(360deg) rotateY(360deg); } to { transform: rotateX(0deg) rotateY(0deg); } } </style> </head> <body> <div id="base"> <div id="outside"> <div id="front">前</div> <div id="back">后</div> <div id="left">左</div> <div id="right">右</div> <div id="top">上</div> <div id="bottom">下</div> </div> </div> </body> </html>
CSS3立方体3D旋转效果,这样的场景在实际项目中还是用的比较多的,关于CSS3立方体3D旋转效果就介绍到这了。