记录一下自己学习的内容，欢迎大家评论与指正。
3D转换
3D坐标系
-
X 轴 往右越大，是正值， 否则反之
-
Y 轴 往下越大，是正值，否则反之
-
Z轴 （指向我们）越大，是正值，否则反之
3D位移
语法格式：
//符合写法
transform: translate3d(x, y,z);
//分开写
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
透视
语法格式：
perspective: 800px;
注意
- 取值范围经常在 800px ~ 1200px 之间。
- 一定给父亲添加
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
3D旋转
旋转-rotate3d:?指可以让元素在三维平面内沿着x轴，y轴，z轴或自定义轴进行旋转 语法
语法格式：
//x轴y沿着正方向旋转45度
transform:rotateX(45deg)
//y轴沿着正方向旋转45度
transform:rotateY(45deg)
//Z轴沿着正方向旋转45度
transform:rotateZ(45deg)
//沿着自定义轴旋转 deg为角度
transform:rotate3d(x,y,z,deg)
缩放
语法格式：
scale(width(宽)的倍数,height(高)的倍数)
scaleX()
scaleY()
scaleZ()
scale3d(x,y,z)
<br>
立体呈现
让子盒子在父盒子内有空间的展示，此时可以给父亲添加
语法格式：
transform-style: preserve-3d;
?
动画
定义动画
keyframes定义动画
//百分比
@keyframes 动画名称{
0%{
样式
}
100%{
样式
}
//from to
@keyframes dance {
from {
transform: scale(1)
}
to {
transform: scale(1.5)
}
}
- 0%是动画的开始，100%是动画结尾。这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式以及次数
- 用百分比规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%
动画使用
语法格式：
属性值可以不用按照顺序书写
属性：
?
动画速度曲线
animation-timing-function:?规定动画的速度曲线，默认是"ease"
?
