CSS 特效 —— 旋转木马【原理详解】

转载于 2021-10-08 17:42:28 发布 · 835 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://demo.cssworld.cn/new/5/2-6.php

文章标签：

#css #php

已归档链接同时被 2 个专栏收录

278 篇文章

订阅专栏

CSS

150 篇文章

订阅专栏

本文介绍了如何利用CSS的perspective、transform-style和rotateY()属性创建一个3D视图，通过translateZ()实现图片分隔，并结合动画或JavaScript控制旋转。关键在于理解视角转换和元素间距调整的原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整代码和效果见 https://demo.cssworld.cn/new/5/2-6.php

在这里插入图片描述

核心代码和原理详解

给舞台设置视距 perspective

.stage {
    perspective: 800px;
}

给容器添加3D视图声明

.container {
    transform-style: preserve-3d;
}

每个图片绝对定位，共用一个3D变换中心点

position: absolute;
left: 0; bottom: 0;

rotateY()旋转随图片下标动态计算，共9张图片，所以 360/9=40deg。

 transform: rotateY(calc(var(--index) * 40deg));

此时图片挤成一团，怎么分开呢？

在这里插入图片描述

我们可以把9张图片想象成9个人，现在这9个人站在一起分别面朝不同的方位，这9个人是不是只要每个人向前走4～5步，彼此之间的距离就拉开了？不妨想象一下夜空中礼花绽开的场景。这里的向前走4～5步的行为，就相当于应用translateZ()函数的行为，当translateZ()函数值为正值的时候，元素会向其面对的方向走去。

在这里插入图片描述
走的距离参照上图进行计算

在这里插入图片描述
为了好看，图片左右两边可以留点间距，例如20px，最终得到需要使用的translateZ()函数值为175.8+20=195.8

translateZ(195.8px)

最后，要让图片旋转起来，只要让容器每次旋转40度就可以了，这个可以使用CSS动画完成，或者使用JavaScript设置也是可以的。

container.onclick = function () {
    var index = (this.index || 0) + 1;
    this.style.transform = 'rotateY('+ index * 40 +'deg)';
    this.index = index;
};