对CSS3 transform属性matrix()矩阵一些学习

1.首先回顾transform属性的相关知识

先理解网页上的x,y轴

transform属性

1.偏移

• transform: translate(x,y) ：移动元素位置，x,y为水平和竖直移动的距离，单位是px
• translateX(x) 定义转换，只是用 X 轴的值。 测试
• translateY(y) 定义转换，只是用 Y 轴的值。 测试
• translateZ(z)

2.旋转

• transform: rotate(x deg)：2D旋转x度，正值顺时针转，负值逆
• 3D旋转
  • rotateX()
  • rotateY()
  • rotateZ()
• 默认旋转的基点是元素中心点

3.倾斜

• transform: skew(x deg,y deg):2D倾斜，x,y为沿x,y轴倾斜的角度
• skewX()
• skewY()
• skew默认旋转的基点是中心点
• 当倾斜的角度大于45度时，实际看到的元素是反过来的，无论怎么倾斜，元素在x,y轴的投影与原始宽高一致,所以元素才会变形