CSS变形基础

transform : rotate (旋转) scale(缩放) skew(倾斜) translate(位移)

旋转

rotateX(*deg)      绕X旋转*度            逆时针为正
rotateY(*deg)      绕Y轴旋转*度        
rotateZ(*deg)      绕Z轴旋转*度
rotate(*deg)         不指定轴，2D空间旋转*度

缩放

scaleX(值)            延X轴缩放             默认值为1，值为负值先翻转在放大
scaleY(值)            延Y轴缩放         
scale(值)              X,Y 同时缩放

倾斜

skewX(*deg)            绕X轴旋转*度
skewY(*deg)            绕Y轴旋转*度	
skew(*deg)             默认绕X轴旋转

transform:skewX(30deg) skewY(30deg)       同时绕x和y轴倾斜

transform:skewX(30deg) skewY(30deg)       同时绕x和y轴倾斜

位移

translateX()        绕X轴位移                        右下为正，左上为负
translateY()        绕Y轴位移
translateZ()        绕Z轴位移
translate(100px,100px)         朝有下各自位移100px   

利用位移实现元素在屏幕水平垂直居中

position:fixed;
left:50%;
top:50%;
transform:translateX(-50%,50%);        在父元素中水平垂直居中改fixed为abstract，父元素设置position:relative

改变元素中心点

transform-orange: left/center/right - top/bottom/center

设置元素属性类型

transform-style:preserve-3d/flat            设置元素属性为3d或者2d(默认)

设置3d元素的透视和井深

perspective            给某个父元素和子元素设置不同的效果

父元素{perspective:1000px }       子元素{perspective:1500px}