css3中2D、3D属性详解

2D转换 transform

 首先要清楚一点，在css中的x轴正方向从左至右，但是y轴的正方向是从上至下。

1. 位移（改变元素的位置）
   transform: translate（x,y）
   定义2D转换，沿着x轴和y轴移动，实际上本质和定位当中的left right top bottom一样。
   例如：

.box {
    transform: translate(100px,200px);
    /* 沿x轴正方向移动100px和沿y轴正方向移动200px
    1. 最多能设置两个值, 一个值用来改变水平方向,另外一个值用来改变垂直方向
    2. 如果设置两个值,第一个值代表水平,第二值代表垂直
    3. 如果设置一个值,那么元素只能在水平方向移动
    4. 如果希望让元素逆方向移动,可以设置负数
    5. 可以设置百分比值，位移设置的值是相对元素自身宽高的
    */

2.旋转（rotate）
transform: rotate(angle);

.box {
        transform: rotate(-45deg);
    }
    /*逆时针按中心点旋转45度
    1. 设置的值代表旋转的角度(单位deg)
    2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转(负数)
    3. 可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center
    */
    方式一：
transform-origin：middle 以中心点旋转，默认值
transform-origin：left top 左上角
transform-origin： left bottom 左下角
transform-origin：right top 右上角
transform-origin：right bottom 右下角
方式二：
  transform-origin: 100px 100px;

3.缩放（scale）
transform: scale(sx, sy);

box {
        transform: scale(2, 2);
}
/* 实际上就是x轴方向（也就是宽度）变大2倍，y轴方向（也就是高度）变大2倍
	1. 最多能设置两个值，第一个值用来改变 宽度，另外一个值用来改变 高度。
	2. 设置缩放的时候，每个值都代表的是 倍数，不能带单位。
	3. 如果希望元素缩小，那么设置的值在 0 - 1 之间的小数，如果希望放大，则设置大于1的值。
	4. 不能设置负数
	5. 如果仅设置一个值,代表元素宽度和高度同时放大或者缩小相应的倍数
	*/

4.倾斜（skew）
transform: skew(30deg, 45deg);

.box {
        transform: skew(30deg, 45deg);
    }
    /*沿着水平方向倾斜30度，沿着垂直方向倾斜45度
    1. 最多能设置两个值，都代表倾斜的角度值(deg)。
	2. 第一个值代表元素沿着水平方向发生倾斜角度（x轴方向的两条边是不倾斜的）, 第二个值代表元素沿着垂直方向发生倾斜角度(y轴方向的两条边是倾斜的)
	3. 如果只设置一个值代表沿着水平方向倾斜斜

3D转换 transform

要清楚在css中的3d坐标系每个方向的指向

1.3d透视（perspective）
css中通过perspective来产生进大远小的效果

perspective设置方式及取值：
1. 如果希望看到translateZ()的’近大远小’效果，需要添加透视。
2. 给设置了transform属性元素的’直接父元素’设置透视即可
2. perspective的值可以设置为任意值，但通常推荐设置为600-1000之间
3. 如果希望设置一个合理的translateZ(),这个值应当小于perspective的值

2.位移（translate）
transform: translateX(n)
让元素沿着x轴移动
设置正数: 从左向右
设置负数: 从右向左

transform: translateY(n)
让元素沿着Y轴移动
设置正数: 从上向下
设置负数: 从下向上

transform: translateZ(n) - 新效果 配合perspective使用
让元素沿着Z轴移动
设置正数: 朝向我们视线移动(靠近我们)
设置负数: 背向移动(远离我们)
说明：生活中我们将这种现象称为’近大远小’，元素的与观察点之间的距离不同，看到的元素尺寸也不同，但实际元素自身并没有变化，只是一种’视觉差’导致的。

统一总结:
1. 3D中的位移也是相对于元素自身位置。
2. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度(后面的Z不能设置百分比)

3.旋转（rotate）
注意：旋转了以后，3d坐标轴的方向会发生变化的
rotateX(angle)
方向判断利用左手原则
rotateY(angle)
方向判断利用左手原则
rotateZ(angle)
方向判断利用左手原则
注：3D旋转中沿Z轴旋转的效果与2D转换中的旋转效果一样。

4.缩放（scale）
scaleX()
沿着x轴放大或缩小
scaleY()
沿着y轴放大或缩小
scaleZ()
沿着Z轴放到或缩小
注意：如果希望看到scaleZ()的效果，该元素必须是立体图形 。

5.倾斜 （skew）
3d中的倾斜实际和2d中的倾斜是一样的
skewX()
沿着x轴倾斜，x轴方向的两条边平行
skewY()
沿着y轴倾斜，y轴方向的两条边平行

6.子元素保留3D转换
transform-style: flat；
transform-style: preserve-3d;
flat 不保留3d转换，默认值
preserve-3d; 子元素保留3d转换，如果不设置这个属性，内部元素不会存在3D的遮挡关系(伪3D)
- 我们通过立方体案例发现，如果不设置这个样式，元素是一种伪3D效果，是平面结构
- 设置后可以看到元素呈现立体的显示效果，但是注意，设置了该样式，也要旋转给个角度才可以更直观的看出是个3d立体图。
⚠️preserve-3d设置在需要3d显示效果的父元素上。