css——transition过度模块、perspective透视、transform、shadow、animation动画、box-sizing、border-radius

transition

transition：property duration timing-function delay；

• property：指定哪个属性需要过度（例如 width 、bgc等）
  注意：all 一次应用全部属性，但不建议全部属性，因为效率低下且所有样式的过度效果都一样，多个属性可以整体逗号隔开
• duration：过度时间
• timing-function：控制过度动画速度（linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速 steps(n)-可以让过度效果分为指定几次来完成，更多自定义过度速度 cubic-bezier），其中 steps 可以实现打字机效果
• delay：过度效果的延迟

三要素（缺一不可）：
1、元素属性改变（可以hover、active等）
2、指定需要改变的属性
3、改变时间

注意：
1、浏览器兼容
2、属性触发结束，默认会动画回原来的样式
3、无法为一些状态值添加过度效果，例如 display 等

perspective

perspective：mpx；（设置三维透视距离，近大远小）

m大小取决多远看图，如果创建一个200px的立方体盒子，perspective < 100px 则相当于在盒子内部看结果，如果 perspective 非常大，那就是站在非常远的地方看盒子，以为 perspective 指定了观察者于 z = 0 平面的距离使三维位置变换元素产生透视的效果，对动画不应用此值

perspective-origin：水平 垂直；（设置相机在水平面的位置，改变观察角度）

transform（都可独立针对xyz一方向改变）

二维：

• transform-origin：水平 垂直；（自定义中心点的位置）
• 旋转：transform：rotate（deg）（默认以中心点顺时针旋转）
• 平移：transform：translate（水平，垂直）（默认参照元素的左上角）
• 缩放：transform：scale（水平，垂直）传入数字代表放大缩小倍数，若只传一个数 则xy同步变化
• 斜切：transform：skew（水平deg，垂直deg）若只传一个数 代表沿x轴斜切，若角度值为正，则往当前轴负方向斜切，反之角度值为负，则正向斜切
• 综合：transform：translate（x，y） scale（num） skew（x，y） rotate（deg）；

（会改变坐标系，所以 rotate 不推荐放前面）

三维（二维和三维推荐使用三维，渲染效果更好）：

• transform: translate3d(x方向的偏移，y方向的偏移，z方向的偏移);
• transform: scale3d(x方向的缩放，y方向的缩放，z方向的缩放);
• transform: rotate3d(x,y,z,angle)
  x,y,z：代表x,y,z方向上的一个向量值,围绕着向量旋转
  angle：代表角度
  例如：transform: rotate3d(1,0,0,30deg);

transform-style：preserve-3d；（由于页面二维，所以上面三条设置看不出来，想要看效果，需要在父元素中设置此属性）

再结合 translate+rotate 做立方体（先rotate（改变坐标系）再translate（固定数值））

添加 perspective 增强透视效果，对动画不应用此值

/* 立方体动画 */
        ul {
   
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform: rotate3d(1, 1, 0, 0deg);
            transform-style: preserve-3d;
            position: relative;
            animation: lunbo 5s infinite linear;
        }

        @keyframes lunbo {
   
            form {
   
                transform: rotate3d(1, 1, 0, 0deg);
            }
            to {
   
                transform: rotate3d(1, 1, 0, 360deg);
            }
        }

        ul li {
   
            width: 2