以下是一个简单的 HTML 3D 立体旋转页面的代码示例:
<!DOCTYPE html> <html> <head> <title>3D立体旋转页面</title> <style> /* 设置容器 */ #container { width: 400px; height: 400px; perspective: 800px; } /* 设置盒子 */ #box { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin 5s linear infinite; } /* 设置表面 */ .surface { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; font-size: 50px; color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } /* 设置不同的表面的旋转角度 */ .front { transform: translateZ(200px); } .back { transform: translateZ(-200px) rotateY(180deg); } .left { transform: translateX(-200px) rotateY(-90deg); } .right { transform: translateX(200px) rotateY(90deg); } .top { transform: translateY(-200px) rotateX(90deg); } .bottom { transform: translateY(200px) rotateX(-90deg); } /* 设置旋转动画 */ @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } </style> </head> <body> <div id="container"> <div id="box"> <div class="surface front">前面</div> <div class="surface back">后面</div> <div class="surface left">左面</div> <div class="surface right">右面</div> <div class="surface top">顶面</div> <div class="surface bottom">底面</div> </div> </div> </body> </html>
代码解释:
- `perspective` 属性设置视距,是让 3D 元素更真实的一个重要属性。
- `transform-style` 属性设置为 `preserve-3d` 表示子元素可以保留 3D 的效果。
- `transform` 属性是控制元素进行 3D 变换的关键属性。
- `translateZ` 用于沿着 z 轴方向移动元素。
- `rotateX`、`rotateY`、`rotateZ` 用于沿着 x、y、z 轴方向旋转元素。
- `animation` 属性用于定义旋转动画的细节。
效果图截图:
专题推荐: