今天与大家来分享一下我做的css3动画案例。
在展示我的案例之前先给大家说说实现这个案例所需要的一些属性。
transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。
通过 CSS3 2D转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate()===>移动
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(y)仅垂直方向移动（Y轴移动）
rotate()===》旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。（单位：deg）
rotate(30deg);2D旋转 正角度-顺时针 负角度-逆时针
scale()===》缩放
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
translate分为两种情况：
1、caleX(x)x轴扩大2倍
2、scaleY(y)y轴扩大2倍
skew()===》切斜
参数表示倾斜角度（单位：deg）
skew分为两种情况：
1、一个参数时：表示水平方向的倾斜角度；
1、两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
来看看我运用这些属性做的动画效果吧！
css
*{
margin: ;
padding: ;
}
#box{
border: 1px slateblue solid;
width: 1000px;
height: 600px;
display: flex;
margin-left: 200px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
#box>div{
width: 300px;
height: 150px;
transition-duration: 3s;
}
#box>div>img{
width: %;
height: %;
}
#box>div:nth-child():hover{
transform: translate(665px,200px);/*移动*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: skew(210deg);/*倾斜*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: rotateY(50deg);/*旋转*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: rotateX(50deg);/*旋转*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: scale();/*缩放*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: rotateZ(180deg);/*旋转*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: rotateZ(180deg) translate(-333px,400px);/*旋转并移动*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: rotateY(360deg);/*旋转*/
transition-property:all;
transition-duration: 3s;
}
#box>div:nth-child():hover{
transform: rotateX(360deg);/*旋转*/
transition-property:all;
transition-duration: 3s;
}
html:
<div id="box">
<div><img src="img/3.jpg" alt=""/></div>
<div><img src="img/4.jpg" alt=""/></div>
<div><img src="img/6.jpg" alt=""/></div>
<div><img src="img/2.jpg" alt=""/></div>
<div><img src="img/7.jpg" alt=""/></div>
<div><img src="img/3.jpg" alt=""/></div>
<div><img src="img/4.jpg" alt=""/></div>
<div><img src="img/6.jpg" alt=""/></div>
<div><img src="img/2.jpg" alt=""/></div>
</div>
想看滑进图片有哪些效果么，自己快来试一试吧！