总结(css3D变形以及2D变形)

2D转换

1.平移 transform:translate(x,y);

2.缩放 transform:scale(x,y);

3.旋转 transform:rotate(deg) //deg 度数

旋转中心 transform-origin：right top； //例子

x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %

length 指 位置

3D变形

左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

---

transform:rotateX(deg)

transform:rotateY(deg)

transform:rotateZ(deg)

方向由左手法则比划出 一开始想了很久很难想到
rotatex、rotatez的旋转正方向是顺时针，rotatey的旋转正方向是逆时针。

perspective

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

perspective: 800px;