2D转换学习

2D转换

转换（transform）是CSS中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换可以简单理解为变形

• 移动： translate

• 旋转：rotate

• 缩放：scale

二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标

2D转换之移动 translate

语法：

transform: translate (x,y); 或者分开写

transform: translateX(n);

transform: translateY(n);

重点：

• 定义2D转换中的移动，沿着X和Y轴移动元素

• translate最大的优点： 不会影响到其他元素的位置

• translate中的百分比单位是相对于自身元素的translate:(50%,50%);

• 对行内标签没有效果

2D转换之旋转rotate

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

1. 语法：

transform:rotate(度数)

1. 重点：

• rotate 里面跟度数，单位是deg 比如rotate(45deg)

• 角度为正时，顺时针，负时，为逆时针

• 默认旋转的中心点是元素的中心点

 

 

让盒子实现水平垂直居中

 移动盒子真的很方便，不用再计算内外边距的数啦

定位不需要转换块级 或 行内块元素

2D转换 中心点 transform-origin

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

1. 语法：

transform-origin: x y;

1. 重点

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

   • x y默认转换的中心点是元素的中心点（50% 50%）

   • 还可以给x y 设置像素 或 方位名词（top bottom left right center）