实现效果
若干张图片组成旋转的万花筒,鼠标移入可暂停旋转
思路
1.对每一张图片设置css的变形:旋转属性,使其形成一个闭合图形(闭合几何体)
2.设置动画,令图片的父盒子即闭合图形开始旋转
代码
html:
<!--设置图片的div属性-->
<div class="box">
<div style="transform: rotateY(0deg) translateZ(275px);"><img src="1.jpg"></div>
<div style="transform: rotateY(40deg) translateZ(275px);"><img src="2.jpg"></div>
<div style="transform: rotateY(80deg) translateZ(275px);"><img src="3.jpg"></div>
<div style="transform: rotateY(120deg) translateZ(275px);"><img src="4.jpg"></div>
<div style="transform: rotateY(160deg) translateZ(275px);"><img src="5.jpg"></div>
<div style="transform: rotateY(200deg) translateZ(275px);"><img src="6.jpg"></div>
<div style="transform: rotateY(240deg) translateZ(275px);"><img src="7.jpg"></div>
<div style="transform: rotateY(280deg) translateZ(275px);"><img src="8.jpg"></div>
<div style="transform: rotateY(320deg) translateZ(275px);"><img src="9.jpg"></div>
</div>
css:
* {padding: 0;margin: 0;}
img {width: 200px;height: 300px;}
body {background-color: #333333;}
/* 设置动画效果 */
@-webkit-keyframes fn {
/* 开始时的角度 */
0% {transform: rotateX(-15deg) rotateY(0deg);}
/* 结束时的角度 */
100% {transform: rotateX(-15deg) rotateY(360deg);}
}
/* 设置box的属性,动画效果定义等 */
.box {
width: 200px;
height: 300px;
position: relative;
margin: auto;
margin-top: 150px;
transform-style: preserve-3d;
transform: rotateX(-10deg);
/* 动画名称为fn,动画时间为10s */
animation: fn 10s;
/* 动画效果无限循环 */
animation-iteration-count: infinite;
/* 线性动画 */
animation-timing-function: linear;
/* 相对布局 */
position: relative;
}
/* 鼠标移动到图片,停止旋转 */
.box:hover { animation-play-state: paused;}
/* 设置图片div的属性 */
.box div {width: 200px;height: 300px;position: absolute;left: 0;top: 0;}