CSS3变形 -迅速变化

变形 - transform 迅速变化

　　1、转换原点

　　　　默认情况下，原点是在当前物体的中心点上
　　　　修改原点:
　　　　　　属性:transform-origin
　　　　　　值:
　　　　　　1、x坐标 y坐标
　　　　　　　　当前物体的左上点为 x:0 y:0
　　　　　　2、宽度百分比 高度百分比
　　　　　　　　0% 0% 左上点
　　　　　　　　50% 50% 中心点
　　　　　　3、关键字
　　　　　　　　top:上
　　　　　　　　bottom:下
　　　　　　　　left:左
　　　　　　　　right:右　　
　　　　　　　　center:中间
　　　　　　　　center center
　　　　　　　　left top
　　　　　　　　transform-origin:0; 表示 所有轴的位置都将归到0点处
　　　　　　　　transform-origin:50px 50px; 表示 x轴在50像素处，y轴在50像素处
　　　　　　　　transform-origin:50px 50px 50px; 表示 x轴，y轴，z轴

　　2、变形:2d
　　　　旋转:rotate()
　　　　位移:translate()
　　　　缩放:scale()
　　　　倾斜:skew()

　　　　旋转:围绕一个参照原点(transform-origin),旋转指定角度，默认为顺时针
　　　　　　语法:transform:rotate(ndeg);
　　　　　　　　n为正 则按顺时针旋转
　　　　　　　　n为负 则按逆时针旋转
　　　　　　　　　　注意:rotate在旋转的过程中，不但能够旋转元素，同时能够旋转绘图的坐标系方向。如果配合着其他的变形一起来做的话，rotate在前的话，会影响之后延坐标轴的其他变形。
　　　　　　　　　　解决方案:如果配合变形一起来做，最好将rotate放在最后一个函数上

　　　　位移:延 坐标方向 移动指定的距离
　　　　　　语法:translate(x轴移动距离,y轴的移动距离);
　　　　　　　　x : 正为右，负为左
　　　　　　　　y : 正为下，负为上
　　　　　　　　transform:translate(50px,50px);
　　　　　　注意:位移不会影响其他元素位置,单可能会盖住周围元素
　　　　　　　　其他两个单方向位移:
　　　　　　　　translateX(距离);
　　　　　　　　translateY(距离);
　　　　　　缩放:将指定坐标轴上的坐标缩放指定的倍数
　　　　　　　　语法:scale(倍数)
　　　　　　　　倍数 : 0-1 之间的小数,缩小
　　　　　　　　>1 放大
　　　　　　　　scale(倍数) 表示等比缩放
　　　　　　其他两个单方向缩放:
　　　　　　　　scaleX(倍数);
　　　　　　　　scaleY(倍数);
　　　　　　　　transform:scale(2);

　　　　　　　　倾斜:沿着坐标轴方向，倾斜指定角度
　　　　　　　　语法:skew(ndeg);仅沿x轴倾斜
　　　　　　　　skew(ndeg,ndeg);沿着x轴和y轴同时倾斜
　　　　　　单方向倾斜:
　　　　　　　　skewX(ndeg)
　　　　　　　　skewY(ndeg)
　　　　　　　　x轴方向:角度为正，向左倒
　　　　　　　　角度为负，向右倒
　　　　　　　　y轴方向:角度为正向上倾斜
　　　　　　　　角度为负向下倾斜

　　3、3d变形
　　　　元素,要从立体角度观察
　　　　坐标轴,x轴，y轴，z轴

　　　　属性:
　　　　　　perspective
　　　　　　设定假定的人眼位置到投影平面的距离
　　　　　　如何使用：设置在父元素上的
　　　　　　浏览器兼容性:
　　　　　　　　Chrom,Safari : -webkit-perspective
　　　　　　　　Firefox : -moz-perspective
　　　　　　位移:
　　　　　　　　3D位移可以改变元素在z轴上的位置
　　　　　　　　translateZ(z);
　　　　　　　　translate3d(x,y,z);
　　　　　　旋转:
　　　　　　　　transform:
　　　　　　　　rotateX(ndeg);
　　　　　　　　rotateY(ndeg);
　　　　　　　　rotateZ(ndeg);
　　　　　　缩放:
　　　　　　　　transform:
　　　　　　　　scaleZ(z);
　　　　　　　　scale3d(x,y,z);