Css3变换和过渡

一.变换

变换属性
transform: none

transform-functions;
可添加多个变换方法进行变换，用空格隔开

变换中心点
transform-origin: x y z;
将变换的基准点切换到该坐标点

变换形式
transform-style: flat(2d转换)

transform-style:preserve-3d;(3d转换)

1.CSS3 2D变换 ransform-style: flat

 平移

  transform:translate( x px,y px);

transition:transform Ns;(这个表示n秒之间执行，单位有秒和毫秒)

 旋转

 transform:rotate(100deg);（deg度数）
        //变换基准点的调整
        transform-origin:0px 0px;

 缩放

  //scale的参数是倍率 倍率大于1就是放大小于反之
        transform:scale(1.2,0.5);

 倾斜

    //scale的参数是倍率
        transform:skew(30deg,120deg);

2.CSS3 3D变换  transform-style:preserve-3d;

3d变换一定要设置其3D模式，表示所有子元素在3D环境
设置景深，调节显示时的模糊度及大小等

div{
//设置3D环境
            transform-style: preserve-3d;
            //设置景深800px
            perspective: 800px;

           //设置模糊度级大小
            transform: translateZ(20px);

}

函数                    描述
matrix3d()        定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x)        定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)        定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)        定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

二.CSS3 过渡

过渡就是元素渐变到某状态

transition:transform Ns;(这个表示n秒之间执行，单位有秒和毫秒)

变换属性      过渡
transform      transition