2D变换 ( 2D Transform )
transform 属性
- 语法：
transform：none | <transform-function> - function list：
translate()，rotate()，scale()，skew()，matrix() - 默认值：none
- 适用于：所有块级元素及某些内联元素；
- 继承性：无；
- 属性值解析：
- translate(x,y) ：定义 2D 转换，沿着 X 和 Y 轴移动元素。
- translateX(n) ：定义 2D 转换，沿着 X 轴移动元素。
- translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。
- rotate(angle)：定义 2D 旋转，在参数中规定角度。
- scale(x,y) ：定义 2D 缩放转换，改变元素的宽度和高度。
- scaleX(n) ：定义 2D 缩放转换，改变元素的宽度。
- scaleY(n) ：定义 2D 缩放转换，改变元素的高度。
- skew(x-angle,y-angle) ：定义 2D 倾斜转换，沿着 X 和 Y 轴。
- skewX(angle) ：定义 2D 倾斜转换，沿着 X 轴。
- skewY(angle) ：定义 2D 倾斜转换，沿着 Y 轴。
- matrix(n,n,n,n,n,n) ：定义 2D 转换，使用六个值的矩阵。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform 译：变动
#box{
transform: translate(200px,200px);
transform: rotate(30deg); 正值顺时针选择，负值逆时针旋转
transform-origin: 50% 50%; 所有的百分比都是参照图像的宽高，可以改变参照点，50%是中心点
transform: scale(0.5,.5); 缩放，50%，默认根据中心点缩放，只有一个值时表示xy轴一样，等比缩放。
transform: skew(30deg,30deg); 2D倾斜
transform: matrix(n,n,n,n,n,,n)旋转，缩放，移动(平移)、倾斜
}
3D转换 ( 3D Transform)
transform-style@3
属性描述： 设置或获取嵌套元素是怎样在三维空间中呈现
语法模板：
transform-style: flat|preserve-3d
默认值： flat 中：平面
属性值描述：
flat: 表示所有子元素在2D平面呈现;
preserve-3d: 表示所有子元素在3D空间中呈现;
适用元素： 所有元素
是否具有继承性： 否
是否具有动画性： 是
脚本接口： transformStyle
perspective
属性描述： 设置或获取透视距离
语法模板：
perspective: number|none
默认值： none
属性值描述：
number：元素距离视图的距离，以像素计;
none：默认值。与 0 相同。不设置透视;
适用元素： 3d视图内的元素
是否具有继承性： 否
是否具有动画性： 是
脚本接口： perspective
perspective-origin
属性描述： 设置或获取 3D 元素的底部位置
语法模板：
perspective-origin: <x-axis> <y-axis>
<x-axis> = left center right length percentage
<y-axis> = top centerbottom length percentage
默认值： 50% 50%
属性值描述：
x-axis 定义该视图在 x 轴上的位置。默认值：50%;
y-axis：定义该视图在 y 轴上的位置。默认值：50%;
适用元素： 具有perspective属性的元素
是否具有继承性： 否
是否具有动画性： 是
脚本接口： perspective-origin
backface-visibility@3
属性描述： 设置或获取元素不面向屏幕时是否可见
语法模板：
backface-visibility: visible|hidden
默认值： visible
属性值描述：
visible：背面是可见的;
hidden：背面是不可见的;
适用元素： 3d元素
是否具有继承性： 否
是否具有动画性： 是
脚本接口： backfaceVisibility
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转
详细描述创建 3d 动画的必备条件。
外部必须有两层包裹，否则无法实现
3D效果最外层必须拥有透视距离空间
perspective:1400px;所有要设计3D动画的父级元素必须添加
transform-style: preserve-3d;
<style>
#container{
perspective:1400px; 模拟3D效果离眼睛的距离，1200-1600的距离最好
}
</style>
<body>
容器 第一层容器，用于添加透视距离，没有容器就没有3D空间
<div id="container">
<div id="wrap"> 包裹 第二层是辅助层
第三层是内容盒子
<div class="face">1</div>
<div class="face">2</div>
</div>
</div>
</body>
transform: matrix3d(x,y,z,deg) scale3d(x,y,z);
(x,y,z)与原点连线，这条线是元素旋转时参照的轴