13day-transform、transition

transform 形变

主要用于：平移元素、旋转元素、缩放元素以及更多的特效来展示元素。

注意：对于变形的元素，有自己的堆叠上下文。经过缩放、平移等变形后的元素在视觉上虽然比以前更大或更小，但是元素在页面上所占用的空间仍然与变形前保持不变。对所有变形函数都成立。

基础语法：

transform: transform-list | none

在形变中分为二维形变以及三维形变

二维形变

平移、旋转、缩放、扭曲产生的形变。
注意：一个元素上只允许存在一个transform属性，如果写了两个 只有后面那个生效。

旋转 rotate

transform: rotate(370deg)

该段代码的表示的意思是元素顺时针旋转90度

注意点：

• 对于元素来说，deg表示的是旋转的单位，是degree角度值的缩写，默认的旋转中心为元素的中心点。
• 当rotate的值为正值时，元素顺时针旋转，负值时，元素逆时针旋转
• 如果旋转角度大于360度，那么totate函数将会对角度值进行取余，余数作为度数的显示效果即该角度的显示效果。

单独设置一个方向的选装

• rotateX：表示沿着水平方向轴旋转，默认的水平方向轴在元素的中间
• rotateY：表示元素沿着垂直方向轴旋转，默认的垂直方向轴在元素的中间

transform:rotateX(30deg);
transform:rotateY(30deg);

改变元素中心位置

transform-origin:left | right | top | bottom | center | % | px;

旋转中心的默认值时元素的中心位置
取值：第一个值表示水平、第二个值表示垂直

平移 translate

transform:translate(50px,50px) | %

• 可以传递两个参数，第一个表示水平位移，第二个参数表示垂直位移
• 只传递一个值时，表示水平位移

单独设置某个方向

• translateX:水平位移

• translateY：垂直位移

• 其中translate的值可以为负值，水平正值往右平移，负值相反，垂直方向正值向下平移，负值相反。

缩放 scale

transform:scale(1,1.5)

scale表示缩放，不需要单位，可以为小数，1表示百分百的原始大小，小于1表示缩小，大于1表示放大。

• 拥有两个参数，第一个参数表示水平方向、第二个表示垂直方向
• 当只写一个值时，表示元素整体放大（X、Y方向都会放大）

单独设置某个方向

• scaleX：水平方向缩放

• scaleY：垂直方向缩放

• 当取值为负值时，左右、上下将会颠倒。

扭曲 skew

代表扭曲或斜切，单位与旋转一样，可以为负值。

transform:skew(15deg)

• 存在两个参数，第一个表示水平，第二个表示垂直，当只写一个值时表示水平，此时第二个默认为0.
• 使用skew会导致图像或内容失真变形，因此在实际开发中，基本不会用到

单独设置某个方向

• skewX：水平方向扭曲
• skewY：垂直方向扭曲

复合语法

transform: rotate(50deg) translate(100px) skew(50deg) scale(2);

上述写法顺序没有固定，但要注意，顺序不同元素的效果也不一样。执行的顺序是从左至右逐一执行

• 在日常开发中，需要先考虑好元素变形的顺序，防止因为顺序导致莫名其妙的问题。

三维形变

三维和二维形变使用的都是transform属性

通过transform-style属性告知浏览器形变方式

transform-style:preserve-3d;

这段代码需要添加给三维形变元素的父元素，提前告知浏览器，我的子元素要变身了，然后浏览器会按照三维形变的方式去渲染父元素以内部的子元素。

在三维形变中，属性值都可以按照二维形变的书写方式书写，除了skew

三维形变在原有的x和y轴的基础上增加了一个z轴，z轴的方向就是我们面对屏幕的方向。

过渡动画 transition

过渡能控制一段时间内属性的值如何变成另一个值。因此我们可以让属性的值变化过程的时间延长，让整个变化行为看起来更加的自然、平滑。

过渡的基本属性

过渡使用四个属性进行定义：

• transition-property:定义元素的哪个属性需要过渡
  • 比如更改颜色，那这个属性值就写color，更改宽度就写width，如果想针对元素所有属性进行过渡，那就写all
• transition-duration：定义元素属性过渡需要的时间，一般单位设置为秒(S)
• transition-timing-function：表示过渡的方式
  • 对于过渡动画是有不同的过渡方法的，不同的过渡方法主要体现在从始态到终态的过程中，不同阶段有着不同的运动速度
    • liner：线性过渡
    • ease：平滑过渡
    • ease-in：由慢到快
    • ease-out：由快到慢
    • ease-in-out：由慢到快再到慢
• trasnition-delay：表示过渡的延迟时间，单位为s（秒）

复合语法

transition: transition-property transition-duration transition-timing-function trasnition-delay

例如：

{
  transition:all 1s ease 0s;
}

该段代码表示的意思是，元素所有的属性都会发生过渡，过渡时间为1s。过渡方式为ease（平滑过渡），延迟时间0s