在CSS3中，为3D旋转效果创建动画是一个非常强大的功能，可以制作出逼真的立体翻转、旋转等视觉效果。核心是结合 @keyframes、animation 属性和 transform 中的3D变换函数。
以下是设置3D旋转动画的详细方法和步骤：
一、核心CSS属性
transform: 用于应用3D旋转。rotateX(angle): 绕X轴（水平轴）旋转。rotateY(angle): 绕Y轴（垂直轴）旋转。rotateZ(angle): 绕Z轴（垂直于屏幕的轴）旋转。rotate3d(x, y, z, angle): 自定义旋转轴。@keyframes: 定义动画的关键帧，描述动画从开始到结束的变化过程。animation: 将@keyframes应用到元素上，并控制动画的播放行为（持续时间、次数、速度曲线等）。perspective: 至关重要。必须在父容器上设置，以创建3D渲染环境。没有它，3D旋转会看起来像2D。transform-style: preserve-3d: 如果元素有3D变换的子元素（如立方体的各个面），需要在父元素上设置此属性，以确保子元素也在3D空间中渲染，而不是被压平。
二、设置3D旋转动画的步骤
步骤1：创建HTML结构
Html深色版本<div> <div>3D Box</div> </div>
.scene是3D场景的容器。.box是进行3D旋转动画的元素。
步骤2：设置3D环境（perspective）
Css深色版本.scene { width: 200px; height: 200px; /* 设置视距，控制透视效果 */ perspective: 600px; /* 可选：设置观察点 */ perspective-origin: center center; margin: 100px; }
步骤3：定义3D旋转动画（@keyframes）
Css深色版本@keyframes spin { /* 0% 或 from: 动画开始状态 */ 0% { transform: rotateX(0deg) rotateY(0deg); } /* 50%: 动画中间状态 */ 50% { transform: rotateX(180deg) rotateY(180deg); } /* 100% 或 to: 动画结束状态 */ 100% { transform: rotateX(360deg) rotateY(360deg); } }
这个动画让元素绕X轴和Y轴同时从0度旋转到360度。
你可以只使用
rotateX或rotateY来创建单一轴的旋转。使用
rotate3d(1, 1, 0, 360deg)可以实现绕一个自定义的对角线轴旋转。
步骤4：应用动画（animation）
Css深色版本.box { width: 100%; height: 100%; background: linear-gradient(45deg, #3498db, #8e44ad); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; /* 应用动画 */ animation: spin 3s linear infinite; /* 可选：添加3D效果的边框或阴影 */ border: 2px solid rgba(255, 255, 255, 0.3); }
animation: spin 3s linear infinite;spin: 动画名称（与@keyframes名称对应）。3s: 动画持续3秒。linear: 动画速度曲线为匀速。infinite: 动画无限循环播放。
三、完整示例：无限旋转的3D盒子
Html深色版本<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Rotate Animation</title> <style> body { background: #2c3e50; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; font-family: Arial, sans-serif; } .scene { /* 创建3D空间，视距600px */ perspective: 600px; } .box { width: 200px; height: 200px; background: linear-gradient(45deg, #e74c3c, #9b59b6); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 10px; /* 应用3D旋转动画 */ animation: continuous-spin 4s ease-in-out infinite; /* 添加阴影增强3D感 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } @keyframes continuous-spin { 0% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(90deg) rotateY(90deg); } 50% { transform: rotateX(180deg) rotateY(180deg); } 75% { transform: rotateX(270deg) rotateY(270deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } /* 可选：悬停时暂停动画 */ .box:hover { animation-play-state: paused; } </style> </head> <body> <div> <div>SPIN</div> </div> </body> </html>
四、高级技巧与注意事项
控制动画速度：
使用不同的
animation-timing-function，如ease,ease-in,ease-out,ease-in-out,cubic-bezier()来创建更自然的启动/停止效果。触发动画：
自动播放：如上例，使用
animation直接定义。悬停触发：将
animation定义在:hover伪类上。Css深色版本.box:hover { animation: spin-once 2s forwards; }JavaScript控制：通过添加/移除CSS类来动态控制动画。
transform-origin：默认旋转中心是元素中心。使用
transform-origin: x y z;可以改变旋转的支点。例如，
transform-origin: 0 0 0;会让元素绕其左上角旋转。性能优化：
频繁的3D变换可能影响性能。可以考虑使用
will-change: transform;提示浏览器进行优化。避免在动画中改变会触发重排的属性（如
width,margin）。
通过以上方法，你可以轻松创建出各种炫酷的3D旋转动画效果。关键是理解 perspective 的作用，并熟练运用 @keyframes 和 animation 来控制动画的细节。
扫一扫在手机打开
