CSS的2D转换

1.转换transform

可实现元素的位移,旋转,缩放等效果

  • 移动:translate

  • 旋转:rotate

  • 缩放:scale

2D 转换之移动 translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位

语法:

复制代码
transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);

重点:

  1. 定义 2D 转换中的移动,沿着X和Y轴移动元素

  2. translate最大的优点:不会影响到其他元素的位置

  3. translate中的百分比单位是相对于自身元素(也就是自身盒子的宽度)的translate:(50%,50%);

  4. 对行内标签没有效果(注意)

显示盒子水平垂直居中:

复制代码
position:absolute   //子绝父相
translate:(50%,50%)  //直接复制

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法:

复制代码
transform:rotate(度数)

重点:

  1. rotate里面跟度数,单位是deg 比如rotate(45deg)

  2. 角度为正时,顺时针,负时,为逆时针

  3. 默认旋转的中心点是元素的中心点

2D 转换中心点 transform-origin

我们可以设置元素转换的中心点

1.语法

复制代码
transform-origin:xy;

2.重点

  1. 注意后面的参数 x和y用空格隔开

  2. xy默认转换的中心点是元素的中心点(50% 50%)

  3. 还可以给xy设置 像素或者方位名词(top bottom left right center)