Transform3D-Carousel

旋转木马效果

实现旋转木马效果比较简单，如下将简单讲解旋转木马效果的实现；

1、布局

舞台 -> 容器 -> 图片，参考如下代码：

<div class="stage">
	<div class="wrap">
		<img src="../images/1.jpeg">
		<img src="../images/2.jpeg">
		<img src="../images/3.jpeg">
		<img src="../images/4.jpeg">
		<img src="../images/5.jpeg">
		<img src="../images/6.jpeg">
		<img src="../images/7.jpeg">
		<img src="../images/8.jpeg">
		<img src="../images/9.jpeg">
	</div>
</div>

2、基本样式

舞台 -> 设置景深：perspective

容器 -> 设置3D场景：transform-style: preserve-3d

图片 -> 设置绝对定位，使图片重合：position: absolute

.stage {
	width: 150px;
	height: 193px;
	perspective: 400px;
	margin: 100px auto;
}

.wrap {
	width: inherit;
	height: inherit;
	transform-style: preserve-3d;
	position: relative;
}

.wrap img {
	position: absolute;
}

3、旋转图片

将图片沿着Y轴旋转一定角度，让图片散开，旋转角度 = 360° / 图片张数；

.wrap img:nth-child(1) {
	transform: rotateY(0deg);
}
.wrap img:nth-child(2) {
	transform: rotateY(40deg);
}
.wrap img:nth-child(3) {
	transform: rotateY(80deg);
}
.wrap img:nth-child(4) {
	transform: rotateY(120deg);
}
.wrap img:nth-child(5) {
	transform: rotateY(160deg);
}
.wrap img:nth-child(6) {
	transform: rotateY(200deg);
}
.wrap img:nth-child(7) {
	transform: rotateY(240deg);
}
.wrap img:nth-child(8) {
	transform: rotateY(280deg);
}
.wrap img:nth-child(9) {
	transform: rotateY(320deg);
}

4、位移图片

现在图片已经朝向不同的方向，接下来只需将图片沿着Z轴移动一定的距离即可，移动的像素可通过如下公式计算：r = 图片宽度一半 / Math.tan(旋转角度一半 / 180 * Math.PI)

需要注意的是，通过上述公式计算出来的值刚好能让图片围成一个圈没有间隙，如果需要增加间隙，只需要在此基础上加上间距值即可。

.wrap img:nth-child(1) {
	transform: rotateY(0deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(2) {
	transform: rotateY(40deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(3) {
	transform: rotateY(80deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(4) {
	transform: rotateY(120deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(5) {
	transform: rotateY(160deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(6) {
	transform: rotateY(200deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(7) {
	transform: rotateY(240deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(8) {
	transform: rotateY(280deg) translateZ(calc(206px + 30px));
}
.wrap img:nth-child(9) {
	transform: rotateY(320deg) translateZ(calc(206px + 30px));
}

5、添加动画

添加旋转动画效果可直接为容器设置动画即可，如下所示：

@keyframes rotate-animation {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(-360deg);}
}

.wrap {
	animation: rotate-animation 10s linear infinite;
}

6、优化

你可以为每一张图片添加一些阴影效果，这里不再累述。