这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

2D转换transform

转换（transform）：可以实现元素的位移(translate)、旋转(rotate)、缩放(scale)等效果
2D转换是改变标签在二维平面上的位置和形状的一种技术

移动translate

移动盒子的位置：定位、外边距（浮动是布局，还是得靠外边距）、2D转换

translate(x,y)
translateX(x)
translateY(y)

div {
        width: 200px;
        height: 200px;
        background-color: pink;

/* 1. x就是x轴移动位置，y就是y轴移动位置(带单位) */
        /* transform: translate(x,y); */
        transform: translate(100px, 100px);

/* 2. 只动X轴(带单位) */
        /* transform: translateX(n); */
        transform: translateX(100px);

/* 3. 只动Y轴(带单位) */
        /* transform: translateY(n); */
        transform: translateY(100px);

}

重点：

最大的优点：不会影响到其他元素的位置
百分比单位相对于自身元素（盒子自身的宽度或高度来对比的）
对行内标签没有效果

旋转rotate

transform:rotate(度数)

rotate里面跟度数，单位deg,不可省略
角度为正时顺时针，负为逆时针
默认旋转的中心点是元素的中心点

<style>
      img {
        width: 300px;
        border-radius: 50%;
        border: 5px solid pink;
        /*和transition过渡一起结合使用 */
        transition: all 1s;
      }

      img:hover {
        transform: rotate(360deg);
      }
</style>

缩放scale

transform：scale（x，y）;

两个参数用逗号分隔，不带单位，是倍数的意思
transform：scale（1，1）均放大一倍，相当于没有变化
transform：scale（2）只写一个参数，那么第二个参数等于第一个参数（2，2）
transform：scale（0.5，0.5）缩小
缩放最大的优势：可以设置转换中心点缩放，默认元素中心点

（直接设置宽高缩放，其中心点是元素的左上角,会影响其他盒子）

不会影响其他盒子

div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 200px auto;
      }

      div:hover {
        transform: scale(2, 2);
}

设置转换的中心点transform-origin

transform-origin：x y；（同时适用于三个属性）

两个参数用“空格”隔开
默认的中心点是50% 50% 元素中心点
可以给参数设置像素或者方位名词

div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 2s;

        /* transform-origin: left bottom; */
        transform-origin: 0px 200px;

}

      div:hover {
        transform: rotate(360deg);
}

综合性的写法transform：translate() rotate() scale();

有顺序问题：当同时有位移和其他属性时，记得将唯一放在最前面

div:hover {

    /* 两种写法动画效果不一样，最好移动放前面 */
    /* transform: translate(150px, 150px) rotate(180deg); */

    transform: rotate(180deg) translate(150px, 150px);
}

动画animation

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相比于过渡：动画实现更多变化，更多控制，连续自动播放等效果

先用keyframes定义动画（类似定义类选择器）

 /* 页面一打开，一个盒子从左边走到右边 */

      /* 1.定义动画 */
      @keyframes move {
        0% {
          /* 动画开始的样式 */
          transform: translateX(0px);
        }
        100% {
          /* 动画结束的样式 */
          transform: translateX(1000px);
        }
      }

元素使用动画

div {
        width: 200px;
        height: 200px;
        background-color: pink;

        /* 2.元素使用动画 */
        /* 调用动画 */
        animation-name: move;
        /* 动画持续时间 */
        animation-duration: 3s;

}

动画序列

0%（from）是动画的开始，100%（to）是动画的完成 ---> 动画序列(多个状态的变化)

从一种样式逐渐变化为另一种样式的效果，期间可以改变任意多的样式任意多的次数

 @keyframes move {
        0% {
          transform: translate(0px, 0px);
        }
        25% {
          transform: translate(1000px, 0px);
        }
        50% {
          transform: translate(1000px, 500px);
        }
        75% {
          transform: translate(0px, 500px);
        }
        100% {
          transform: translate(0px, 0px);
        }
}

动画属性

@keyframes ：定义动画
animation ：所有动画的复合属性，除了animation-play-state
animation-name ：动画名称
animation-duration ：动画持续时间，默认0
animation-timing-function ：动画的速度曲线，默认ease
animation-delay ：动画何时开始，默认0
animation-iteration-count ：动画被播放的次数，默认1，还有infinite
animation-direction ：规定动画是否在下一周期逆向播放，默认normal，alternate逆播放
animation-play-state ：动画是否正在运行（running）或暂停（pause），默认running
animation-fill-mode ：动画结束后状态，保持forwards，回到起始backwards

div {
        width: 200px;
        height: 200px;
        background-color: pink;

        /* 2.元素使用动画 */
        /* 调用动画 */
        animation-name: move;
        /* 动画持续时间 */
        animation-duration: 10s;
        /* 动画的速度曲线 */
        animation-timing-function: ease;
        /* 动画何时开始 */
        animation-delay: 2s;
        /* 动画播放次数 */
        animation-iteration-count: 3;
        /* 动画在下一周期是否反向播放 */
        animation-direction: alternate;
        /* 动画结束后状态 */
        animation-fill-mode: forwards;

/* 复合简写属性：前两个必须写 不能省略 */
        animation: move 3s linear 0s 3 normal forwards;
}

复合属性的简写形式

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画结束状态

3D转换

近大远小
物体后面遮挡不可见

三维坐标系

x轴：水平向右
y轴：垂直向下
z轴：垂直屏幕往外（往外面是正值，往里面是负值）

3D移动translate3d

translateX（x）：仅仅在x轴移动
translateY（y）：仅仅在y轴移动
translateZ（z）：仅仅在z轴移动（一般用px为单位）结合透视才能看到效果
translate3d（x，y，z）

 body {
        perspective: 200px;
} 

div {
        width: 300px;
        height: 300px;
        background-color: pink;

        transform: translateX(100px) translateY(100px) translateZ(100px);

/* 复合属性  translate3d */
        transform: translate3d(100px,100px,100px);
}

/* z轴值：100px     d视距值：200px*/

透视perspective

在2D平面产生近大远小的视觉立体效果
透视也称视距（d）:人眼睛到屏幕的距离（d越大，物体越小，d越小，物体越大）
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面的

当d视距值<=Z值时，物体会消失

body {
        animation: perspective 2s infinite alternate linear;
}

      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto;
        /* transform: translateX(100px) translateY(100px) translateZ(100px); */
        transform: translateZ(100px);
      }

      @keyframes perspective {
        0% {
          perspective: 200px;
        }
        100% {
          perspective: 500px;
        }

}

3D旋转rotate3d

3D旋转可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转

rotateX（xdeg）
rotateY（ydeg）
rotateZ（zdeg）
rotate3d（x，y，z，deg）自定义轴

正负值方向-左手准则（大拇指指向轴正向，四指为正值方向）

绕哪个轴旋转，那么该轴上坐标不动，另外两个轴取对应值

img:hover {
        /* transform: rotateZ(180deg); */
        /* transform: rotateX(180deg); */
        /* transform: rotateY(180deg); */
        transform: rotate3d(1, 1, 0, 180deg);
}

3D呈现transform-style

控制子元素是否开启三维立体环境（preserve-3d开启，flat不开启默认）
代码写在父级，但影响的是子盒子

      .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        perspective: 500px;
        transition: all 1s;

        /* 让子元素保持3d效果 */
        transform-style: preserve-3d;
      }

浏览器私有前缀

是为了兼容老版本的写法，比较新版本的浏览器无需添加

-moz- ：代表火狐firefox浏览器的私有属性
-ms- ：代表ie浏览器的私有属性
-webkit- ：代表safari、chrome浏览器的私有属性
-o- ：代表Opera浏览器的私有属性

 /* 正常写法 */
        border-radius: 10px;
        /* 兼容写法 */
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;

CSS进阶4 | 青训营笔记