CSS之 2D转换---3D转换（内含过渡）

转换可以实现元素的位移、旋转、缩放等效果

2D转换

• translate --- 移动
• rotate --- 旋转
• scale --- 缩放  

1.translate

语法：(px)

transform:translate(x,y);

transform:translateX(n);

transform:translateY(n);

不会影响其他元素的位置 （会变成前后关系）

transl对于行内元素无效   ——  先转换为行内块元素后即可使用

2.rotate

语法:（deg）

transform:rotate(度数); 

正数是顺时针，负数是逆时针 

    --过渡-- 

动画从一个状态过渡到另一个状态 

谁变化，给谁加

语法：

transition:要过渡的属性  花费时间  运动曲线  何时开始 

属性	宽度、高度、背景颜色、内外边距等等（所有就用all）
花费时间	单位：秒
运动曲线	默认：ease（速度变慢）         linear（匀速）ease-in（加速）ease-out（减速） ease-in-out（先加速后减速）
何时开始	单位：秒      设置延迟时间       默认：0

 3.设置转换的中心点

语法：

transform-origin:x y; 

若：transform-origin:50% 50%;   则绕中心旋转 

4.scale 

语法：

transform:scale(x,y); <其中的数字是放大的倍数>

默认从中心点缩放 ，不影响其他盒子

综合写法顺序 

语法：

transform:translate(x,y) rotate(度数) scale(x,y); 

3D转换

x轴：水平向右

y轴：垂直向下

z轴：垂直屏幕向外 

 

1.3D位移 

语法：

transform:translateX(100px)：仅仅是在X轴上移动 

transform:translateY(100px)：仅仅是在Y轴上移动 

transform:translateZ(100px)：仅仅是在Z轴上移动 

transform:translate3d(x,y,z) 

2.3D转换 （透视perspective ）

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

3.3D旋转 

语法：

transform:rotateX(35deg)：沿着X轴正方向旋转45°

transform:rotateY(35deg)：沿着Y轴正方向旋转45°

transform:rotateZ(35deg)：沿着Z轴正方向旋转45°

transform:rotate3d(x,y,z,deg) 

4.3D呈现 （transform-style）

控制子元素是否开启三维立体环境

• transform-style：flat   （默认）   子元素不开启 
• transform-style：preserve-3d      子元素开启
• 写给父级