纯CSS实现图片3D立体旋转效果，核心是利用CSS的3D变换属性和动画属性，不需要编写任何JavaScript代码，就能让静态图片呈现出立体的旋转动态效果，适配绝大多数现代浏览器。
核心CSS属性说明
要实现3D立体旋转，首先需要了解几个核心的CSS属性，这些属性共同构成了3D效果的基础。
perspective属性
perspective用来设置3D元素的透视距离，也就是观察者与z=0平面的距离，值越小透视效果越强，值越大效果越平缓。这个属性需要写在3D变换元素的父容器上，才能让子元素的3D变换生效。
transform属性
transform是CSS的变换属性，在3D场景下常用的函数包括：
- rotateX()：围绕X轴旋转，正值顺时针，负值逆时针
- rotateY()：围绕Y轴旋转
- rotateZ()：围绕Z轴旋转，效果和2D的rotate一致
- translateZ()：沿Z轴移动元素，改变元素在3D空间中的前后位置
animation属性
animation用来定义动画规则，结合@keyframes可以设置旋转的关键帧，让图片按照设定的路径和速度持续旋转。
完整实现示例
下面是一个让图片围绕Y轴持续3D旋转的完整代码示例，包含HTML结构和CSS样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS图片3D旋转</title>
<style>
/* 父容器设置透视 */
.rotate-container {
width: 300px;
height: 200px;
margin: 50px auto;
perspective: 1000px;
}
/* 图片样式和旋转动画 */
.rotate-img {
width: 100%;
height: 100%;
border-radius: 8px;
/* 设置3D变换保留子元素3D效果 */
transform-style: preserve-3d;
/* 应用旋转动画 */
animation: rotateY 4s linear infinite;
}
/* 定义旋转关键帧 */
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="rotate-container">
<img class="rotate-img" src="https://ipipp.com/sample.jpg" alt="旋转示例图片">
</div>
</body>
</html>
实用调整技巧
可以根据实际需求调整以下参数，得到不同的旋转效果：
调整旋转轴
如果需要围绕X轴旋转，只需要修改@keyframes中的旋转函数，将rotateY替换为rotateX即可，示例代码如下：
@keyframes rotateX {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
调整旋转速度
animation属性的第二个值表示动画周期，单位是秒，数值越小旋转速度越快，比如将4s改为2s，旋转速度会提升一倍。
增强立体感
可以结合translateZ让图片在旋转时前后移动，或者在父容器上调整perspective的数值，让3D透视效果更明显。也可以在图片旋转时添加阴影，提升立体的视觉感受。
控制动画状态
可以通过animation-play-state属性控制动画的播放和暂停，比如鼠标悬停时暂停旋转，移开时继续播放：
.rotate-img:hover {
animation-play-state: paused;
}
注意事项
使用纯CSS实现3D旋转时，需要注意transform-style: preserve-3d属性要写在需要进行3D变换的元素上，否则子元素的3D效果会失效。另外perspective属性要写在父容器上，不要直接写在旋转元素本身，否则透视效果会不符合预期。如果需要在低版本浏览器兼容，需要添加对应的浏览器前缀，比如-webkit-、-moz-等。
CSS_3Dtransformperspectiveanimation修改时间：2026-06-12 21:18:24