CSS2D转换

柔情只为你懂 2024-03-17 18:29 214阅读 0赞

#### 文章目录 ####

*   *  2D转换
     *   *  2D 转换之移动 translate
         *  2D 转换之旋转 rotate
         *  2D 转换中心点 transform-origin
         *  2D 转换之缩放scale
         *  2D 转换综合写法

### 2D转换 ###

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

转换（transform）可以简单理解为变形

*  移动：translate
 *  旋转：rotate
 *  缩放：scale

2D转换是改变标签在二维平面上的位置和形状的一种技术。

#### 2D 转换之移动 translate ####

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

**语法：**

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

**重点：**

*  定义2D转换中的移动，沿着X和Y轴移动元素
 *  translate最大的优点：不会影响到其他元素的位置
 *  translate中的百分比单位是相对于自身元素的translate:(50%,50%);
 *  对行内标签没有效果

#### 2D 转换之旋转 rotate ####

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

**语法：**

transform:rotate(度数)

**重点：**

*  rotate里面跟度数， 单位是 deg 比如 rotate(45deg)
 *  角度为正时，顺时针，负时，为逆时针
 *  默认旋转的中心点是元素的中心点

#### 2D 转换中心点 transform-origin ####

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

**语法：**

transform-origin: x y;

**重点：**

*  注意后面的参数 x 和 y 用空格隔开
 *  x y 默认转换的中心点是元素的中心点 (50% 50%)
 *  还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）

#### 2D 转换之缩放scale ####

缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。

**语法：**

transform:scale(x,y);

**重点：**

*  注意其中的x和y用逗号分隔
 *  transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
 *  transform:scale(2,2) ：宽和高都放大了2倍
 *  transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
 *  transform:scale(0.5,0.5)：缩小
 *  sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

#### 2D 转换综合写法 ####

**注意：**

1.  同时使用多个转换，其格式为：transform:translate() rotate() scale() …等
2.  其顺序会影响转换的效果。
3.  当我们同时拥有位移和其他属性的时候，记得要将位移放到最前面