css3旋转木马轮播图,3D旋转木马轮播图(原创)

body {

perspective:1000px;

/* 透视要加到父级元素 */

}

section {

position:relative;

width:300px;

height:200px;

margin:150px auto;

transform-style:preserve-3d;

animation:rotate 16s linear infinite;

background:url("https://www.jq22.com/img/cs/500x500-1.png");

}

section:hover {

/* 鼠标移入时暂停动画 */

animation-play-state:paused;

}

@keyframes rotate {

0% {

transform:rotateY(0deg);

}

100% {

transform:rotateY(360deg);

}

}section div {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

/* background:url("images/fc08.png") no-repeat;

这里背景图是开始做的参考，会被body里的img覆盖了，实际上没有用了 */

}

section div:nth-child(1) {

transform:translateZ(300px);

}

section div:nth-child(2) {

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

/* 这里要先旋转好了，在移动距离 */

}

section div:nth-child(3) {

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

/* 这里要先旋转好了，在移动距离 */

}

section div:nth-child(4) {

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

/* 这里要先旋转好了，在移动距离 */

}

section div:nth-child(5) {

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

}

section div:nth-child(6) {

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

}