SS3 3D 转换及 CSS3 动画
css3 3d转换
介绍
css3 中的3d效果只是视觉上的伪3d
2d 转换主要围绕着x轴和y轴，3d的转换相对于2d转换多了一个z轴
相关属性
transform 2d/3d转换
translate3d(x,y,z) / translateX translateY translateZ
scale3d(x,y,z) / scaleX scaleY scaleZ
rotate3d(x,y,angle) / rotateX(angle) rotateY(angle) rotateZ(angle)
transform-origin 更改基点
transform-style 开启3D空间
正常情况下，我们是没有办法创建3D空间的，我们需要通过属性transform-style属性来开启3D空间。
transform-style: flat|preserve-3d;
perspective 视距
观察者沿着平行于Z轴的视线与屏幕之间的距离即为视距的距离，简称视距。
视距要设置在父元素的身上，才会有效果。
perspective-origin 景深基点
决定的是从哪一个方向去查看元素
backface-visibibility 背面隐藏
当一个透明的多面体存在时，可以通过这个属性将重叠的透明的两面中的背面隐藏
animation
如果需要让一个元素动起来，可以通过animation动画来实现
相关属性
Animation-name 调用关键帧
Animation-duration 设置完成时间
Animation-timing-function 动画的速度曲线
Animation –delay 延迟
Animation-iteration-count 动画应该播放的次数
N 设置播放次数
infinite 无限次播放
Animation-direction 规定是否该轮流反向播放动画
Normal
alternate 动画应该轮流反向播放
Animation-play-state 暂停/运行
Paused 暂停
Running 运行
Animation-fill-mode 规定动画在播放之前或者之后，其动画效果是否可见
None 不改变默认
Forwards 当动画完成后保持最后一个属性值
Backwards 在Animation –delay指定的一段时间之内，在动画显示之前，应用开始属性值。
Both 向前和向后填充模式都被应用
简写
Animation: name duration timing-function delay iteration -count direction
关键帧
@keyframes name {
0% {code …}
10% {code …}
20% {code …}
}
也可以通过from和to来设置:
@keyframes name {
from {}
to {}
}
animate动画库
通过animate动画库可以实现一些动画效果
网址
https://daneden.github.io/animate.css/
使用方法:
在代码中引入animate.css，并且将相应的类名设置给不同的元素。