23 css 2D形变、css过渡动画

2D形变

2D形变包含的内容是

1. 平移
2. 旋转
3. 缩放
4. 拉伸(倾斜)

注意：

1. 行元素不能形变，img和input除外
2. 仅仅是元素形状的变化，文档流的空间并没有变化

设置形变，使用 transform 属性

一、平移使用 translate

1. 水平方向平移 translateX(num) num是具体的值，正数向右平移，负数向左平移
2. 垂直方向平移 translateY(num) num是具体的值，正数向下平移，负数向上平移
3. 复合写法 translate(x,y)

.wp{
    width: 100px;
    height: 100px;
    background: #04be02;
    transform: translate(10px,100px);
}

二、旋转使用 rotate(度数) 度数的单位是 deg

1. 度数为正，顺时针旋转
2. 度数为负，逆时针旋转

.gg:hover{
        transform: rotate(360deg);
    }

三、缩放使用 scale(x轴方向的倍数，y轴方向的倍数)

1. 如果x轴和y轴的缩放倍数相同，则可以只写一个

   scale(n)

2. 如果需要把形变组合在一起

   transform：scale(2) rotate(180deg) translate(30px,50px)

.sc:hover{
        transform: scale(0.2) rotate(180deg);
}

四、设置倾斜 skew()

写法和translate 一样，分为x轴倾斜，y轴倾斜和复合写法

skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n度

• X轴度数为正，向左倾斜
• X轴度数为负，向右倾斜
• Y轴同理
  注意，度数不能是90度，使用复合写法，他们的和不能为90度。

.skew{
    transform: skew(30deg,40deg);
}

五、形变的层级，后来者居上

使用 transform-origin 属性，设置形变的参考点，默认是center center

transform-origin：x轴方向的位置 y轴方向的位置

值：

1. 具体的数值
2. left top right bottom center 等方向名词的组合，如果只写一个词，另一个默认是center

.gg{
    width: 200px;
    height: 200px;
    transition: all 1s;
    /* 设置形变(旋转)的参考点 */
    transform-origin:300px 300px ;
}

如果同时设置 平移和缩放，有两种写法

1. 先写平移，然后缩放，他的结果是 先平移到具体位置，然后在该位置上执行缩放
2. 先写缩放，然后平移，他的结果是 先把所有的值进行缩放，然后按照缩放之后的值平移

一般都用第一种写法

过渡动画 transition

设置元素从一种状态达到另一种状态的动画效果

1. transition-property 设置需要过渡的css属性，如果有多个属性需要过渡，则可以用英文逗号分开，也可以直接设置all，all表示所有变化的css属性都需要过渡，如果不设置该属性，默认为all

.wp{
    transition-property: width,height,margin-top,background;
}

2. transition-duration 设置过渡动画的持续时间，单位是 s 秒

/* 设置过渡动画的持续时间 */
transition-duration: 2s;

3. transition-delay 设置过渡动画的延迟时间，动画开始的时候有延迟，结束的时候也有延迟

 /* 设置过渡动画的延迟时间 */
transition-delay:1s;

4. transition-timing-function 设置动画的变化曲线

• ease 默认值，先快后慢
• linear 匀速运动
• ease-in 淡入效果，先快后慢
• ease-out 淡出效果，先迅速,再快,后慢
• ease-in-out 淡入淡出，两边慢，中间快
  以上均属于贝塞尔曲线中的特殊曲线

/* 设置动画的变化曲线 */
transition-timing-function: linear;

过渡动画也可以合写：

transition：property duration timing-function delay

后面两个可以省略，直接设置默认值

transition：property duration

transition：all 1s;

过渡动画的触发时机

过渡动画不会主动触发

触发方式：

1. 通过伪类触发 hover focus targeted
2. 媒体查询
3. 通过js触发