css3运动实现旋转相册

2025-11-22 10:03:21

1、首先需要做的就是通过 transform属性将所以的图片平均转动一个角度，使其形成一种立体环绕式的感觉。

.box img:nth-child(1){

transform: rotateY(0) translateZ(400px);

}

.box img:nth-child(2){

transform: rotateY(30deg) translateZ(400px);

}

.box img:nth-child(3){

transform: rotateY(60deg) translateZ(400px);

}

.box img:nth-child(4){

transform: rotateY(90deg) translateZ(400px);

}

.box img:nth-child(5){

transform: rotateY(120deg) translateZ(400px);

}

.box img:nth-child(6){

transform: rotateY(150deg) translateZ(400px);

}

.box img:nth-child(7){

transform: rotateY(180deg) translateZ(400px);

}

.box img:nth-child(8){

transform: rotateY(210deg) translateZ(400px);

}

.box img:nth-child(9){

transform: rotateY(240deg) translateZ(400px);

}

.box img:nth-child(10){

transform: rotateY(270deg) translateZ(400px);

}

.box img:nth-child(11){

transform: rotateY(300deg) translateZ(400px);

}

.box img:nth-child(12){

transform: rotateY(330deg) translateZ(400px);

}

2、其次就是利用@keyframes来使元素从0%到100%的变化。

@keyframes dd{

0%{

transform: rotateY(0) rotateX(-5deg);

}

25%{

transform: rotateY(90deg) rotateX(-15deg);

}

50%{

transform: rotateY(180deg) rotateX(-5deg);

}

75%{

transform: rotateY(270deg) rotateX(-15deg);

}

100%{

transform: rotateY(360deg) rotateX(-5deg);

}

3、最后利用animation使其进行运动起来，这样一款纯css3的旋转相册就制作完成了，是不是很简单。

.box{

width: 130px;

height: 200px;

margin: 300px auto;

position: relative;

transform-style: preserve-3d;

animation: dd 12s linear 0s infinite;

}

4、完整的css代码如下。

body{

perspective: 1000px;

background: #000;

}