CSS3——2D、3D变换

2D

transform: none|transform-functions;

transform-origin: x y ;------设置变换中心。
（x，y可以是像素值、百分比或方位名词–均是相对于自身左上角为起点而言）

一、位移

//平移
transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);

translate最大优点：不会影响其他元素的位置。
它对行内标签没有效果。
若值为百分比，那么该百分比是相对于自身的百分比。

可与定位结合实现居中定位：
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);

二、旋转

transform: rotate(angle);
transform: rotateX(angle);
transform: rotateY(angle);

说明：

• 度数单位deg；例如：
• 旋转方向：角度为正，顺时针；角度为负，逆时针。
• 默认中心点：元素中心点。

三、缩放(scale)

transform: scale(x,y);//x,y分别为在x，y方向上缩放的倍数
transform: scale(n);//宽高同时变为原来的 n 倍

优点：
1、变换时不会影响其他的盒子，而且可以设置缩放的中心点。

transform综合写法时（如果同时含有位移和其他属性时，把位移放在最前面）

3D

一、位移(translate)

translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值,一般用px，

二、透视(perspective)

 perspective：npx;	为3D转换元素定义透视视图。

透视写在被观察元素的父盒子上面!!!

三、3D旋转(rotate3d)

rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

旋转方向判断：左手准则

四、3D呈现(transform-style)

• 控制子元素是否开启三维立体环境。
• 代码给父级，但影响的是子盒子。

transform-style: flat|preserve-3d;
// flat	表示所有子元素在2D平面呈现。
// preserve-3d	表示所有子元素在3D空间中呈现。