本案例主要使用了CSS3中的变换transform和动画animation属性，实现了跑马灯效果，详细的解释在代码中的注释中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
/*指定观察者与平面的距离，使有透视效果*/
/*若无法正常3d效果，将perspective属性提到更上一个父容器即可(此处已上提，从items-->container)*/
perspective: 1000px;
}
.items {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 200px auto;
/*指定子元素定位在三维空间内*/
transform-style: preserve-3d;
/*让所有item的父级元素（即items）旋转，item就是围绕着旋转了*/
animation: doMove 5s infinite linear;
}
.item {
width: 200px;
height: 200px;
background-color: skyblue;
opacity: .6;
font-size: 200px;
line-height: 200px;
text-align: center;
position: absolute;
}
.item img{
width: 200px;
height: 200px;
}
/*定义自动旋转的动画*/
@keyframes doMove {
100%{
transform: rotateY(-360deg);
}
}
.items:hover {
/*鼠标移入 暂停动画*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="container">
<div class="items">
<!--简便起见，可以用背景色和数字代替图片 此处我用的是图片-->
<div class="item"><img src="img/1.jpg" /></div>
<div class="item"><img src="img/2.jpg" /></div>
<div class="item"><img src="img/3.jpg" /></div>
<div class="item"><img src="img/4.jpg" /></div>
<div class="item"><img src="img/5.jpg" /></div>
<div class="item"><img src="img/1.jpg" /></div>
</div>
</div>
<script>
$(function () {
var itemNum = $(".container .items .item").length;//要旋转的div的数量
var itemDeg = 360 / itemNum; ///计算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度
$(".items>.item").each(function (index, element) {
$(element).css({
//给每一个item设置好位置
//rotateY让每一个item绕着Y轴偏移，itemDeg*index是不同索引div的偏移角度
//translateZ是控制item在角度偏移后，往他们的正上方移动的距离，数值越大旋转的范围越大
transform: "rotateY(" + itemDeg * index + "deg) translateZ(280px)"
});
});
});
</script>
</body>
</html>
版权声明：本文为GaHoOo原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。