skew的默认transform-origin是这个物件的中心点，坐标轴的中心点应该是在方块的中心。
不理解skew工作原理的最大障碍，就是skew所用的坐标系，纵向是X轴，横向是Y轴，与常见的坐标系是反着的。比如：
skewX(30deg) 表示X轴朝逆时针方向旋转30deg，坐标系上的物体也会随着X轴旋转。
skewY(30deg) 表示Y轴朝顺时针方向旋转30deg，坐标系上的物体也会随着Y轴旋转。既然skew(xDeg,yDeg)的括号里放的是坐标轴旋转的角度，那么接下来说一下旋转正方向的问题。y轴顺时针转为正，X轴逆时针转为正。
rotate属性 旋转效果
参考：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
http://www.w3cplus.com/css3/css3-3d-transform.html
用法：
rotate(45deg) 定义 2D 旋转一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
用法：
rotateX(45deg) 定义沿着 X 轴的 3D 旋转。
rotateY(45deg) 定义沿着 Y 轴的 3D 旋转。
rotateZ(45deg) 定义沿着 Z 轴的 3D 旋转。正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
rotate3d(x,y,z,angle) 定义 3D 旋转。 - x：是一个 0 到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个 0 到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个 0 到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
前面介绍的三个旋转函数功能等同：
rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
发表评论