Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background-color:#000;
}
.container {
	position:relative;
	width:200px;
	margin:100px auto;
	transform-style:preserve-3d;
	transform:rotateX(-15deg);
	/* animation:name duration timing-function delay iteration-count direction fill-mode;
	*/
            /* name      duration      timing-function
            动画的名字   动画过程时间      播放速度
                delay     iteration-count    direction fill-mode;
	*/
                /* 延时时间   1 -2- 4  次   运动的方向    动画播放完结后的状态 */
            animation-name:move;
	animation-duration:4s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
@keyframes move {
	from {
	transform:rotateX(-15deg)  rotateY(0deg);
}
to {
	transform:rotateX(-15deg)  rotateY(360deg);
}
}.container div {
	position:absolute;
	left:0;
	top:0;
}
img {
	width:200px;
	height:280px;
}
.container div:nth-last-of-type(1) {
	transform:rotateY(0deg) translateZ(200px);
}
.container div:nth-last-of-type(2) {
	transform:rotateY(60deg) translateZ(200px);
}
.container div:nth-last-of-type(3) {
	transform:rotateY(120deg) translateZ(200px);
}
.container div:nth-last-of-type(4) {
	transform:rotateY(180deg) translateZ(200px);
}
.container div:nth-last-of-type(5) {
	transform:rotateY(240deg) translateZ(200px);
}
.container div:nth-last-of-type(6) {
	transform:rotateY(300deg) translateZ(200px);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

css3旋转木马

更新时间:2022-12-02 23:42:05

0