变形和简单动画

变形和动画

【变形】

是指图形或者说内容根据我们所设置的路径或者变化方式，产生变化。
变形方式有多种。
【第一种】
scale(缩放)
transform（变形）: scale(缩放)（默认值为1）;
取值（正数）
当scale（）的取值为0~1时，为缩小；当scale（）的取值大于1的时候，为放大。
例如：
放大为原来的2倍： transform: scale(2);
缩小为原来的1/2：transform: scale(0.5);
很多变化，变形会影响我们整个页面的布局，但是transform: scale不会影响布局，即整个布局不会乱，但是在放大的时候会覆盖周围其他标签。

【第二种】
​ skew倾斜
是指将内容进行倾斜，可以是文字也可以是图片等。
取值:(角度）
书写方式：(数字+deg)
正值：逆时针倾斜；
负值：顺时针倾斜；
例如：
将内容顺时针倾斜30度
即： transform: skew(-30deg);
我们常见的是文字倾斜。但又一种情况为整体倾斜但文字内容不倾斜时，我们如果倾斜整体的话，内容也会跟着倾斜，这时我们所需要的确是文字内容不倾斜，怎么办呢？
我们只需要将内容文字反向倾斜相同的角度，那么就会出现整个图片或者包含块倾斜，但文字内容没有倾斜。
例如：
div{ transform: skew(-30deg);}
整个div顺时针倾斜30度（即倾斜 -30°）
div>p{transform: skew(30deg);}
div下面的p元素逆时针倾斜30度（即倾斜30°）

就会得到整体div倾斜30度，但文字内容看起来并没有倾斜。

【第三种】
​ 旋转 rotate
是指整个内容或者图片进行旋转变化。
（默认值为Z轴）
（也可调整X/Y轴旋转）:后面跟上旋转度数;
正值：顺时针旋转；
负值：逆时针旋转；
书写形式：
transform: rotate(45deg);（默认值Z轴）
改变为​Y轴旋转：
transform: rotateY(360deg);
X轴同理
transform: rotateX(360deg);
旋转肯定是有旋转中心点的

旋转中心点的设置
默认值为当前元素的中心点。也就是说围绕Z轴旋转的话，旋转中心点在当前元素的中心点；围绕Y轴旋转的话，旋转中心点在当前元素的Y轴的中线，围绕X轴旋转的话，旋转中心点在当前元素的X轴的中线。
书写格式
（transform-origin：值 原点（中心点）位置）
即：
transform-origin: 0 0 ;

【第四种】
​ translate （偏移）
是指将所需内容进行位置的偏移。
书写：
transform: translate（值，值）
​ 第一个值是X轴偏移量（正向右，负向左）
​ 第一个值是Y轴偏移量（正向下，负向上）
单位为正常像素单位，其他单位也可以使用，只是通常情况为像素单位，方便。（其他单位在浏览器读取，展示时也会换算为像素单位）
​ 注：两个值之间的分隔符是逗号（英文）
​ 再注：只要给小括号内多个值，一般分隔符都是逗号；

很多时候我们需要将这些变形组合使用会达到更好的效果。
例如
【旋转＋缩放】
transform: scale(缩放) 空格 rotate(旋转) ;
中间以空格隔开。

【简单动画】

简单动画是一个过程，即上面的变形所用的时间、方式等。当上述变形没有动画设置时，没有中间的过程，有的只是结束时的样子。

1、过渡：
1秒（s）=1000毫秒（ms）
过渡包括变化的内容有哪些，通常为all，即所有。
还有变化的方式：快、慢、匀速，先快后慢、先慢后快等。
还包括变化的整个需要的时间，即过程所用的时间。
当所有变化的内容、方式、时间等都设置好过后。我们所看到的变形就成为了一个简单的动画过程。

简写
transition: all linearb 1s;
全写
过渡属性：适用范围（尺寸、颜色、透明）等；
transition-property:width;
过渡效果；
取值：
ease（默认值）匀速；
ease-in （由慢到快）；
ease-out （由快到慢）；
ease-in-out（由慢到快再到慢）
transition-timing-function: ease;
然后是过渡时间；
transition-duration: 1000ms;

【过渡的延迟】：

设置延迟的效果：
取值
（时间ms毫秒/s秒）
transition-delay:

在我们需要简单的动画效果出现变化层次的时候，我们就可以使用过渡延迟效果。

今天分享的内容完毕，
谢谢 ^ _ ^！