变形 - 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);
