旋转木马 css,CSS:3D旋转木马效果

一个简单有趣的css动画

3D旋转木马效果

* {

margin: 0px;

padding: 0px;

}

#box {

width: 200px;

height: 300px;

animation: rotate 20s linear infinite;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto auto;

transform-style: preserve-3d;

}

img {

width: 100%;

position: absolute;

}

img:nth-child(1) {

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

}

img:nth-child(2) {

transform: rotateY(36deg) translateZ(600px);

}

img:nth-child(3) {

transform: rotateY(72deg) translateZ(600px);

}

img:nth-child(4) {

transform: rotateY(108deg) translateZ(600px);

}

img:nth-child(5) {

transform: rotateY(144deg) translateZ(600px);

}

img:nth-child(6) {

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

}

img:nth-child(7) {

transform: rotateY(216deg) translateZ(600px);

}

img:nth-child(8) {

transform: rotateY(252deg) translateZ(600px);

}

img:nth-child(9) {

transform: rotateY(288deg) translateZ(600px);

}

img:nth-child(10) {

transform: rotateY(324deg) translateZ(600px);

}

@keyframes rotate {

0% {

transform: rotateX(0) rotateY(0);

}

25% {

transform: rotateX(20deg) rotateY(180deg);

}

50% {

transform: rotateX(0) rotateY(360deg);

}

75% {

transform: rotateX(-20deg) rotateY(540deg);

}

100% {

transform: rotateX(0) rotateY(720deg);

}

}