day15

CSS3的3D转换transform

平移

个数	属性	说明
1	transform ：none；	定义不进行转换。
transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的
2	transform ：translateX(200px)；	根据X轴给定的参数，从当前元素位置移动。
3	transform ：translateY(200px)；	根据Y轴给定的参数，从当前元素位置移动。
4	transform ：translateZ(200px)；	定义 3D 转换，只是用 Z 轴的值。
5	transform ：translate(10px,20px)；	定义 2D 平移移动。
6	transform ：translate3d(10px,20px,30px)；	定义 3D 平移移动。
7	transform ：translateX(200px)   translateY(200px)   translateZ(200px)；

旋转

个数	属性	说明
transform ：rotate(30deg)；旋转 单位deg 默认是Z轴旋转
1	transform ：rotateX(30deg)；	根据X轴给定的参数，从当前元素位置旋转。
2	transform ：rotateY(30deg)；	根据Y轴给定的参数，从当前元素位置旋转。
3	transform ：rotateZ(30deg)；	定义 3D 转换，只是用 Z 轴的值。
4	transform ：rotate3d(0,0,1,30deg)；	定义 3D 旋转。
5	transform ：rotateX(30deg)   rotateY(30deg)   rotateZ(30deg)；

缩放

个数	属性	说明
transform ：scale(2)；缩放  默认是X和Y同时缩放 默认值是1
1	transform ：scaleX(2)；	通过设置 X 轴的值来定义缩放转换
2	transform ：scaleY(3)；	通过设置 Y 轴的值来定义缩放转换。
3	transform ：scaleZ(2)；	通过设置 Z 轴的值来定义 3D 缩放转换。
4	transform ：scale(2,5)；	定义 2D 缩放。
5	transform ：scale3d(2,3,4)；	定义 3D 缩放。
6	transform ：scaleX(2)   scaleY(3)  scaleZ(3)；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

倾斜

个数	属性
transform ：skew(30deg)；倾斜 单位deg
1	transform ：skewX(30deg)；	通过设置 X 轴的值来定义倾斜转换
2	transform ：skewY(30deg)；	通过设置Y 轴的值来定义倾斜转换
3	transform ：skew(30deg,130deg)；	定义2D倾斜
4	transform ：skewX(30deg)  skewY(130deg)  ；
5	注意点：倾斜没有Z轴的写法

 改变元素基点的位置transform-origin

CSS3的3D场景的设置

个数	属性	说明
1	transform-style: flat | preserve-3d； 指定嵌套元素如何在3D空间中呈现	A. flat：flat值为默认值，表示所有子元素在2D平面呈现 B. preserve-3d：表示所有子元素在3D空间中呈现。 C. 注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素
2	perspective：200px；  景深   视距	用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
3	perspective-origin	是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度