css动画走马灯5秒,用animation制作走马灯

先添加元素

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

复制代码

先给ul设置preserve-3d，然后通过定位使其呈现如图所示效果

ul{

margin: 300px auto;

width:133px;

height:200px;

border:1px solid red;

position:relative;

transform-style: preserve-3d;

transition: 15s;

}

ul li{

width:133px;

height:200px;

list-style: none;

position: absolute;

}

复制代码

之后给每个li添加偏移旋转，使其位置呈现如图所示效果

ul li:nth-child(1){

transform: translateX(55px) rotateY(0) translateZ(345px)

}

ul li:nth-child(2){

transform-origin:center;

transform: translateX(55px) rotateY(30deg) translateZ(345px)

}

ul li:nth-child(3){

transform-origin:center;

transform: translateX(55px) rotateY(60deg) translateZ(345px)

}

ul li:nth-child(4){

transform-origin:center;

transform: translateX(55px) rotateY(90deg) translateZ(345px)

}

ul li:nth-child(5){

transform-origin:center;

transform: translateX(55px) rotateY(120deg) translateZ(345px)

}

ul li:nth-child(6){

transform-origin:center;

transform: translateX(55px) rotateY(150deg) translateZ(345px)

}

ul li:nth-child(7){

transform-origin:center;

transform: translateX(55px) rotateY(180deg) translateZ(345px)

}

ul li:nth-child(8){

transform-origin:center;

transform: translateX(55px) rotateY(210deg) translateZ(345px)

}

ul li:nth-child(9){

transform-origin:center;

transform: translateX(55px) rotateY(240deg) translateZ(345px)

}

ul li:nth-child(10){

transform-origin:center;

transform: translateX(55px) rotateY(270deg) translateZ(345px)

}

ul li:nth-child(11){

transform-origin:center;

transform: translateX(55px) rotateY(300deg) translateZ(345px)

}

ul li:nth-child(12){

transform-origin:center;

transform: translateX(55px) rotateY(330deg) translateZ(345px)

}

复制代码

最后给ul添加hover效果，鼠标滑过时，使其产生动态效果,就是我们想要的了

ul:hover{

transform: rotateX(45deg) rotateZ(90deg) rotateY(720deg);

transform-origin: center center 0;

}

复制代码