CSS3变形 （位移、旋转2D/3D、缩放、倾斜）

位移

2D位移

X轴位移
	transform:translateX(位移值px) 向右为正 向左为负
Y轴位移
	transform:translateY(位移值px) 向下为正 向上为负
XY同时位移
	transform: translateX(位移值px	translateY(位移值px)；
	ransform: translate(x位移,y位移)	 只写一个值代表x轴位移

• 利用变形位移居中

1. 子元素宽高改变可以自适应变化
2.子元素不设置宽高也可以拿到宽高的一半
元素{position:absolute;left:50%;top:50%;translate(-50%,-50%);（向左和向上拉取当前元素宽高的一半）

3D位移

z轴位移
	transform:translateZ(位移值px) 
xyz都位移
	transform: translateX(位移值px) translateY(位移值px) translateZ(位移值px)；
    transform: translate3d(x,y,z)；

形成3d空间/舞台

transform-style:flat(平面)/preserve-3d(3d空间); tranform:rotateX(),rotateY();
默认是平面的,如果要看到空间效果的话,需要将平面形成3d空间,一般将该属性添加到变形元素的父元素身上

旋转

2D旋转

X轴
		transform: rotateX(数值deg)
Y轴
		transform: rotateY(数值deg)
XY轴都旋转
		transform: rotateX(数值deg) rotateY(数值deg);
		transform: rotate()->z轴旋转

3D旋转
Z轴

transform: rotateZ(数值deg)
transform: rotate3d(a,b,c,d) abc的取值 0/1 0:不旋转 1:旋转 d:旋转角度

景深

persepective:数值px;
值越小越近,看到的越大, 一般加在变形元素的父元素身上

变形原点

transform-origin:水平 垂直;
值可以是数值+px/数值+%/关键字(left/right/center  top/center/bottom）

backface-visibility: hidden;
背部隐藏 只能看到正面,看不到背面

变形缩放

	x轴缩放
		transform:scaleX(数字)
	Y轴缩放
		transform:scaleY(数字)
	XY轴缩放
		transform:scaleX(数字) scaleY(数字)
		transform:scale(x,y)  一个值代表x和y的缩放
	Z轴缩放
		transform:scaleZ(数字) 
	XYZ轴缩放
		transform:scaleX(数字) scaleY(数字) scaleZ(数字)
		transform:scale3d(x,y,z)
	 0:隐藏 1:不缩放 0-1：缩小  >1 放大

变形倾斜

x轴倾斜 
	transform:skewX(数值deg)
Y轴倾斜 
	transform:skewY(数值deg)
XY轴倾斜 
	transform:skewX(数值deg) skewY(数值deg);
	transform:skew(x,y) 只写一个值代表x轴倾斜
变形 xy 3d里面没有倾斜