2021-06-26 使用animation动画与CSS3d变形属性设置一个万花筒相册

实现效果

若干张图片组成旋转的万花筒,鼠标移入可暂停旋转

思路

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;}

效果