2D形变和过渡动画

2D形变

2D形变包含的内容：平移，旋转，缩放，倾斜(拉伸)

注意：1. 行元素不能形变，img 和 input 除外

           2. 仅仅是元素形状的变化，文档流的空间并没有变化

           3. 形变不会影响整体布局，类似于定位布局( relative )，也就是说，设置他之后，元素不会变成脱离文档流(不会按照块，行级格式上下文的规定去布局盒子，而是元素不再占据默认分配的空间，他下面的元素会上去补位)

           4. 形变的层级，后来者居上

设置形变，使用  transform  属性

  /* input 设置2D形变 */
.txt{
            width: 120px;
            height: 30px;
            border: 2px #ccc solid;
            transition: all 1s;
            outline: none;
        }
        .txt:focus{
            width: 200px;
            height: 50px;
            border-color: #f60;
        }

body{
        <input type="text" class="txt" placeholder="请输入内容">
}

设置形变的参考点

        元素形变的中心原点

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

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

        值： 1.  具体的数值

                2. left  top  right  bottom  center  等方位名词组合，如果只写一个词，则另一个默认为  center

 

1. 平移  translate

设置平移， transform: translate(10px,100px);

        a. 水平方向平移

              translateX (num)，num是具体的数值，正数向右平移，负数向左平移

        b.  垂直方向平移

              translateY (num)，num是具体的数值，正数向下平移，负数向上平移

         c.  复合写法      translate(x，y)

2. 缩放  scale

设置缩放，transform: scale(2,3)；

        缩放  scale ( x轴方向的倍数，y轴方向的倍数 )

        如果 x轴和y轴缩放的倍数相同，可以只写一个   scale (n)

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

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

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

        1.先写平移，再缩放，他的结果是 先平移到具体位置，然后在该位置上执行缩放

        2.先写缩放，再平移，它的结果是 先把所有的值进行缩放，然后按照缩放后的值平移

        一般都用第一种写法

3. 旋转  rotate

设置旋转，transform: rotate(360deg);

        旋转  rotate(度数)，度数的单位是  deg，度数为正 顺时针旋转，度数为负 逆时针旋转

 

4. 倾斜(拉伸)  skew

设置倾斜  transform: skew(45deg,0deg)

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

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

                x轴度数为正，向左倾斜

                x轴度数为负，向右倾斜    y轴同理

                度数不能是90度，使用复合写法，他们的和 不能是90度

 

---

过渡动画

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

属性：transition

 .trans{
            width: 100px;
            height: 100px;
            background: #04be04;
            margin-top: 50px;
            /* 设置过渡动画绑定的css属性 */
            transition-property:width,height,margin-top,background;
            /* 设置过渡动画的持续时间 */
            transition-duration: 1s;
            /* 设置过渡动画的延迟时间 */
            transition-delay: 0s;
            /* 设置动画的变化曲线 */
            transition-timing-function: ease;
        }
        /* 通过 hover 触发过渡动画 */
        .trans:hover{
            width: 400px;
            height: 200px;
            margin-top: 10px;
            background: #f00;
        }

1. 设置过渡动画绑定的css属性   

        transition-porperty  设置需要过渡的css属性，如果有多个属性需要过渡，则用英文逗号分开

        也可以设置  all，表示所有变化的css属性都需要过渡，如果不设置该属性，默认为 all，transition: all 2s;         

2. 设置过渡动画的持续时间

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

3. 设置过渡动画的延迟时间

        transition-delay: 0s;

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

4. 设置动画的变化曲线

 transition-timing-function: ease;

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

          ease ， 默认值，先快后慢

          ease-in，淡入效果，先快后慢

          ease-out，淡出效果，先匀速，再快，后慢

          ease-in-out  淡入淡出，两边慢，中间快

          linear  匀速运动

以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写：

            transition: porperty duration timing-function delay;

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

5. 过渡动画的触发时机

触发方式：

        1. 通过伪类触发，hover  focus  targeted

        2. 媒体查询

        3. 通过 js触发