CSS3总结七：变换（transform）

• 2D视图模型解析
• 3D视图模型解析
• 平移
• 旋转
• 缩放
• 扭曲
• matrix()终极变幻的方法

 一、2D视图

2D视图就是默认平面上的每个点都与视线垂直，图形不会随视角变化发生视图变形。

 二、3D视图

3D视图就是图形假设了一个视角和透视点，图形根据视角和透视点，展示图形在该视角和透视点的变形图形。

 三、平移

• translate()
• translatex()
• translatey()

平移是基于2D视图的图像位置变幻，所以平移不会发生形变。相当于设置了设置定位(position+top/left),但是不会渲染引擎不会渲染平移元素不会放到独立的渲染层渲染，所以也就不会产生浮动流，且父级元素的overflow可以作用平移的子元素的溢出部分。

以上示例的关键代码：

 1 /* 示例一 */
 2 /* 没有什么关键代码，就是两个普通的嵌套DIV */
 3 /* 示例二 ： 基于示例一使用平移实现居中*/
 4 position:absolute;/* 父级设置了relative */
 5 left:calc(50%);
 6 top:calc(50%);
 7 transform:translate(-50%,-50%);
 8 /* 示例三、四 使用平移溢出父级 overflow有效*/
 9 overflow:hidden;/示例四父级DIV/
10 transform:translate(60px,60px); 

需要注意的是translate()是用来设置纵横坐标同时偏移的方法，如果设置一个参数只有横向偏移。所以如果需求是一个方向的偏移建议使用translatex()或者translatey()。

 四、旋转

• 2D旋转：rotate()
• 3D旋转：rotate3d()、rotatex()、totatey()

关于2D旋转和3D旋转需要注意的是，是web的平面图形基于2D空间和3D空间的旋转运动，2D空间的旋转就是在最前面介绍的2D视图模型的原理，在2D视图中旋转的是基于图形所在平面的某一点做绕该点的旋转运动。而3D空间的旋转是基于3D空间的绕空间上的某一条线旋转，假设视角固定（3D视图模型），由于图形的3D旋转产生视角移动，导致最终我们看到的web界面渲染的图形所出现的形变效果，这种效果就是transform的3D旋转效果。

需要注意的是web界面上的3D旋转模型是图形所在的平面做旋转运动，通常我们理解的日常三维空间的旋转是一个物体围绕另一个物体运动，运动的物体参照的是另一个物体的三维空间坐标进行运动，但是在web界面中的3D旋转是基于图形所在平面自己的三维坐标进行旋转，由旋转的图形在三维空间发生位移而图形所在的平面同步偏转位移，所以web中的3D旋转所基于的三维坐标会同步跟着图形移动。

简单的说，就是3D旋转时坐标轴会跟着图形旋转而旋转，所以在做连续旋转运动时需要注意所参照的坐标发生的位移问题。

CSS3总结七：变换（transform）

原文：https://www.cnblogs.com/ZheOneAndOnly/p/10884469.html