transform2D/3D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

tansform:translate()

可以给负值，效果同理

tansform:translate(-50px,-50px) 元素向左移动-50px，元素向上移动-50px，效果和position:absolute一样，脱离文档流，不会占用其他元素的位置。

tansform.rotate()

可以给负值，效果同理

tansform:rotate(50deg)元素顺时针旋转50度
tansform:rotateX(50deg)元素绕X面旋转50度，如果是90度可以隐藏元素 但是还在文档流中，占位置
tansform:rotateY(50deg)元素绕Y轴旋转50度（立体旋转），如果是90度依然可以隐藏元素，transform:rotateX(90deg)一样。

transform:scale()

元素拉伸,给负值无效。

transform:scale(2,2)元素的宽度被拉长2倍，高度被拉长2倍，并且脱离文档流，超过的部分会遮挡其他元素。
transform:scaleX(2)元素的宽度被拉长2倍，会遮挡其他元素，所占位置依然是之前的宽高。
transform:scaleY(2)元素的高度被拉长2倍，会遮挡其他元素，所占位置依然是之前的宽高。
transform:scaleX/Y/Z(0)元素被隐藏，宽高依然是设定的值，占位置。

transform:skew()

可以给负值，往反方向，会遮挡住其他元素。如果给一个值，默认是skewX()方向。两个值就是X和Y轴方向同时翻转

transform: skew(30deg);

transform: skew(30deg)
transform: skewY(30deg)
transform: skewY(30deg)效果图
transform: skewX(90deg)或者transform: skewY(90deg)会直接黑掉整个html
transform: skewX(90deg)或者transform: skewY(90deg)

transform.matrix()

集结以上所有功能，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

transform:matrix(0.866,0.5,-0.5,0.866,0,0)