这是我参与「第四届青训营 」笔记创作活动的第十三天
1. transition 属性
transition 属性设置元素当过渡效果，四个简写属性为：
-
transition-property 指定CSS属性的name，transition效果
-
transition-duration transition效果需要指定多少秒或毫秒才能完成
-
transition-timing-function 指定transition效果的转速曲线
-
transition-delay 定义transition效果开始的时候
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
2. 旋转 transform: rotate（ deg））
img {
width: 250px;
/* 加上过渡才有动画效果 */
transition: all 2s;
}
img:hover{
/* 正顺，负逆 */
transform: rotate(-360deg);
}
3. 转换原点 transform-origin
语法：默认圆点是盒子中心
transform-origin：原点水平位置 原点垂直位置；
取值：
-
方位名词（left、top、right、bottom、center）
-
像素单位取值
-
百分比（参照盒子自身尺寸计算）
如：
/* 按右下角为中心旋转 */
transform-origin: right bottom;
4. 缩放 transform：scale（ x轴缩放倍数 y轴缩放倍数）；
- 一般transform：scale（缩放倍数）；从中心点缩放
5. transform具有层叠性
如：transform:translate(-50%,-50%);与transform: scale(5);
不会同时生效，保留后者
应transform: translate(-50%,-50%) scale(5);
6. 宽高快捷键：w58 h58 +enter
width: 58px;
height: 58px;
7. 快捷键div.mask +enter
<div class="mask"></div>
8.渐变 linear-gradient（）；
background-image: linear-gradient(
/* 透明到不那么透明 */
transparent,
rgba(0,0,0, .6)
);
9. 空间转换/3D转换 正值指向自己
空间位移
transform: translate3d(x,y,z);
但仅此不能实现空间移动，需加入透视。
10. 透视效果 perspective
-
属性（添加给父级）
-
语法：Perspective：值；
-
取值：像素单位数值，数值一般在800-1200px
-
透视距离也就是视距，是人眼到屏幕的距离，近大远小。
11. 空间旋转 rotate
仍需给父级添加perspective以及自身添加transition: all .5s;
-
transform: rotateZ(360deg);沿着Z轴旋转
-
transform: rotateX(60deg);沿着X轴旋转 此时perspective实现透视效果，近实远虚
-
transform: rotateY(60deg);沿着Y轴旋转
左手法则：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向。
transform: rotat3dZ(x,y,z,角度度数);
用来自定义旋转轴的位置及旋转的角度
x,y,z取值为0-1之间的数字
不怎么用，了解即可
12. 立体呈现 transform-style：preserve-3d
-
添加在父元素
-
transform-style默认值flat，表示元素处于2d平面内呈现
13.空间缩放
如：transform: scale3d(0.5, 1.1, 2);
14. 动画 animation
过渡只能实现2个状态间变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
使用方法：
1. 定义动画
@keyframes change {
from {}
to {}
或
@keyframes change {
0% }
50% {}
100% {}
//百分比指的是动画总时长的占比
}
