html万花筒相册旋转效果,前端项目实例——旋转万花筒照片墙（HTML+CSS）

万花筒

*{

padding: 0;

margin: 0;

}

img{

width:200px;

height: 300px;

}

body{ background-color: #333333; } //背景颜色

.box{

width:200px;

height:300px;

position:relative;

margin:auto;

margin-top:150px;

transform-style:preserve-3d;

transform:rotateX(-10deg);

animation: fn 10s; //动画名称为fn，动画时间为10s

animation-iteration-count: infinite; //动画效果无限循环

animation-timing-function: linear; //线性动画

position: relative //相对布局

}

.box:hover{

animation-play-state: paused;

}

.box div{

width:200px;

height:300px;

position: absolute;

left:0;

top:0;

}