过渡

CSS常用属性

过渡

transition 有多个值

• 作用：在某个时间段可以显示css中某个属性值的变化过程
• 语法 transition：属性 时间，属性 时间；
• 值为 all 表示选中所有属性

属性：
1. transition-property  表示过渡属性
2. transition-duration  表示过渡属性所需时间
3. transition-delay  表示过渡的开始时间

2D

transform 将元素应用转换为 2D 或 3D

取值
translate()	元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
scale()	元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
rotate()	值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
skew()	元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix()	所有元素之和

  skew() 在元素重心，将元素进行拉伸
    参数一：水平方向拉伸
    参数二：垂直方向拉伸

3D

3d 是立体空间 三维的
    目的：如何在网站中实现立体效果
    方式：
       第一步：建立立体思维方式，忘记平面
       第二步：找到标准轴原点，以及x y z 轴
                1) x：网站水平方向 往右值越大
                2) y：网站竖直方向 往下值越大
                3) z：网站看不见的虚拟空间，越往里越虚拟值越大
               注意：原点以元素为基点，标准位置（默认） 视图窗口左上角
       第三步：根据属性沿着轴进行抽象样式

    3d 语法：
    第一步：声明3d，设置透视镜
       body {
          perspective: 1000px;
          transform-style: preserve-3d;
       }
    第二步：开始3d 效果
    注意：x y z 轴不是固定在浏览器上的；而是在元素上的，会随着元素上的，会随着元素的转动而转动