先来看下效果
主要用了css3的3D转换和动画(transform,animation),这个轮播效果是由三个div通过transform达到折叠的效果组合而成的,然后给它们共同的父元素div一个旋转动画效果,就完成了这个轮播的效果,需要注意,父元素必须添加transform-style: preserve-3d;否则无法达到3D的效果,下面直接上代码(由于之前为子元素加了border,导致效果不是很好,已改正):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<style>
.frame {
position: relative;
width: 100px;
height: 300px;
margin: 50px;
transform-style: preserve-3d;
animation: myfirst 9s linear infinite 0s;
}
.item {
width: 100px;
height: 300px;
position: absolute;
opacity: 0.8;
}
.item1 {
background-color: red;
transform: translateZ(28.87px); /*面到z轴的垂直距离*/
}
.item2 {
background-color: blue;
transform: rotateY(120deg) translateZ(28.87px);
}
.item3 {
background-color: yellow;
transform: rotateY(240deg) translateZ(28.87px);
}
@keyframes myfirst {
0% {
transform: rotateY(0deg);
}
20% {
transform: rotateY(120deg);
}
34% {
transform: rotateY(120deg);
}
54% {
transform: rotateY(240deg);
}
67% {
transform: rotateY(240deg);
}
87% {
transform: rotateY(360deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="frame">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
</div>
</body>
</html>