CSS3-transform 2D转换

矫情吗；* 2023-07-03 02:39 35阅读 0赞

### 文章目录 ###

*   *   *   *  缩放
             *   *   *  scaleX(x)
                     *  scaleY(y)
                     *  scale(x, y)
                     *  transform-origin
             *  平移
             *   *   *  translateX(x)
                     *  translateY(y)
                     *  translate(x, y)
             *  旋转
             *   *   *  rotateX(angle)
                     *  rotateY(angle)
                     *  rotate(angle)
             *  斜切
             *   *   *  skewX(angle)
                     *  skewY(angle)
                     *  skew(x-angle, y-angle)

`transform` 转换，是CSS3最具颠覆性的特性之一，既可以应用2D转换，也可以应用3D转换。

2D转换：通过该属性可以对元素在平面上进行缩放、旋转、移动和斜切等操作。

通过 `transform` 中的方法对元素进行缩放、移动等不同于传统方法（设置 width、height等）会影响页面的布局，transform 中的方法并不会影响页面的布局。

#### 缩放 ####

通过 `scale()` 方法将元素根据中心原点进行缩放；可以单独进行横向或纵向缩放也可以综合设置。scale() 方法接收的值为数字类型没有单位，如果值大于 1 则对元素进行放大，如果值小于 1 则进行缩小。

###### scaleX(x) ######

仅对元素进行水平方向的缩放（X轴缩放）

语法：

/* x X轴缩放的值 */
    transform: scaleX(x)

示例：

CSS:

.box div { 
      /* 设置浮动 */
      float: left;
      width: 200px;
      height: 100px;
      margin: 20px 10px;
      background-color: skyblue;
    }
    
    .box div:nth-child(2) { 
      background: purple;
      /* 设置过渡 */
      transition: transform 1s;
    }
    
    .box div:nth-child(2):hover { 
      /* 设置水平方向缩放 */
      transform: scaleX(1.5);
    }

HTML:

![在这里插入图片描述][20200131160500250.gif]

###### scaleY(y) ######

仅对元素进行垂直方向的缩放（Y轴缩放）

语法：

/* y Y轴方向缩放的值 */
    transform: scaleY(y)

CSS:

.box div:nth-child(2):hover { 
      /* 设置垂直方向缩放 */
      transform: scaleY(1.5);
    }

![在这里插入图片描述][20200131160903716.gif]

###### scale(x, y) ######

对元素的水平和垂直方向同时进行缩放；如果只有一个值会进行等比例缩放。

transform: scale(x, y)

CSS:

.box div:nth-child(2):hover { 
       /* 同时缩放 */
       transform: scale(1.5, .5);
     }

![在这里插入图片描述][20200131161320361.gif]

###### transform-origin ######

`transform-origin` 属性用于设置元素的基点位置，默认为元素的中心点位置

语法：

transform-origin: x-axis y-axis z-axis;

*  `x-axis` X 轴基点
 *  `y-axis` Y 轴基点
 *  `z-axis` Z 轴基点

属性值可以是px、百分比等具体的值，也可以是 top、right、bottom、left和center这样的关键词；作为 2D 转换时，属性值至少为一个，另一个默认为 Y 轴中心点。

示例：

.box div:nth-child(2) { 
      /* ... */
      /* 设置元素转换的基点 */
      transform-origin: left top;
    }

![在这里插入图片描述][20200131164526772.gif]

#### 平移 ####

平移是通过 `translate()` 方法来实现；同样可以单独设置水平或垂直方向也可以综合设置。

水平方向值为正时向右平移，垂直方向值为正时向下平移；单位可以使用 px、% 等。

###### translateX(x) ######

设置水平方向的平移

示例：

CSS:

.box div { 
      /* 设置浮动 */
      float: left;
      width: 200px;
      height: 100px;
      margin: 20px 10px;
      background-color: pink;
    }
    
    .box div:nth-child(2) { 
      background: purple;
      /* 设置过渡 */
      transition: transform 1s;
    }
    
    .box div:nth-child(2):hover { 
      /* 设置水平方向的平移 */
      transform: translateX(100px);
    }

HTML:

![在这里插入图片描述][20200131173436878.gif]

###### translateY(y) ######

设置垂直方向的平移

.box div:nth-child(2):hover { 
      /* 设置垂直方向的平移 */
      transform: translateY(-20px);
    }

![在这里插入图片描述][20200131174113526.gif]

###### translate(x, y) ######

同时设置水平和垂直方向的平移；只设置一个值时另一个默认为 0。

.box div:nth-child(2):hover { 
      /* 同时设置 */
      transform: translate(100px, -20px);
    }

![在这里插入图片描述][20200131174531225.gif]

#### 旋转 ####

通过 `rotate()` 方法实现旋转，在 2D 旋转中可以单独设置元素X轴或Y轴方向的旋转，也可以设置元素在平面上的旋转（顺时针或逆时针旋转）。

###### rotateX(angle) ######

沿着 X 轴进行旋转；angle 旋转的角度，单位为 `deg`；旋转的轴默认为元素的高的中心位置。  
CSS:

.box { 
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: #ccc;
      border: 1px solid gray;
    }
    
    .box div { 
      width: 100%;
      height: 100%;
      font-size: 36px;
      text-align: center;
      line-height: 200px;
      background: pink;
      /* 过渡 */
      transition: transform 1000ms;
    }
    
    .box div:hover { 
      /* 设置沿 X 轴旋转 */
      transform: rotateX(60deg)
    }

HTML：

![在这里插入图片描述][20200131193248323.gif]

###### rotateY(angle) ######

沿着 Y 轴进行旋转；旋转的轴默认为元素的宽的中心位置

CSS:

.box div:hover { 
      /* 设置沿 Y 轴旋转 */
      transform: rotateY(60deg)
    }

![在这里插入图片描述][20200131193641661.gif]

###### rotate(angle) ######

设置元素在平面上的旋转；为正值顺时针旋转为负值时逆时针旋转；旋转的基点默认为元素的中心位置。

CSS:

.box div:hover { 
      /* 平面旋转 */
      transform: rotate(60deg)
    }

![在这里插入图片描述][20200131195227929.gif]

#### 斜切 ####

###### skewX(angle) ######

沿着 X 轴进行斜切；保持高度

示例：

CSS:

.box { 
      margin: 20px;
      width: 100px;
      height: 100px;
      background-color: #ccc;
      border: 1px dashed gray;
    }
    
    .box div { 
      width: 100px;
      height: 100px;
      font-size: 24px;
      text-align: center;
      line-height: 100px;
      background: skyblue;
      
      /* 过渡 */
      transition: transform 1000ms;
    }
    
    .box div:hover { 
      /* 沿 X 轴进行斜切 */
      transform: skewX(30deg);
    }

![在这里插入图片描述][20200131203717256.gif]

###### skewY(angle) ######

沿着 Y 轴进行斜切；保持宽度

CSS:

.box div:hover { 
      /* 沿 Y 轴进行斜切 */
      transform: skewY(30deg);
    }

![在这里插入图片描述][20200131203732325.gif]

###### skew(x-angle, y-angle) ######

综合设置，X轴和Y轴同时倾斜

.box div:hover { 
      /* 综合设置 */
      transform: skew(30deg, 30deg);
    }

![在这里插入图片描述][20200131203748825.gif]  
使用 `transform` 进行转换时也可以多个效果一块设置，之间用空格隔开即可；需要注意的是旋转效果要放在最后面，因为旋转会改变元素的坐标，会出现意想不到的效果。

[20200131160500250.gif]: https://img-blog.csdnimg.cn/20200131160500250.gif
[20200131160903716.gif]: https://img-blog.csdnimg.cn/20200131160903716.gif
[20200131161320361.gif]: https://img-blog.csdnimg.cn/20200131161320361.gif
[20200131164526772.gif]: https://img-blog.csdnimg.cn/20200131164526772.gif
[20200131173436878.gif]: https://img-blog.csdnimg.cn/20200131173436878.gif
[20200131174113526.gif]: https://img-blog.csdnimg.cn/20200131174113526.gif
[20200131174531225.gif]: https://img-blog.csdnimg.cn/20200131174531225.gif
[20200131193248323.gif]: https://img-blog.csdnimg.cn/20200131193248323.gif
[20200131193641661.gif]: https://img-blog.csdnimg.cn/20200131193641661.gif
[20200131195227929.gif]: https://img-blog.csdnimg.cn/20200131195227929.gif
[20200131203717256.gif]: https://img-blog.csdnimg.cn/20200131203717256.gif
[20200131203732325.gif]: https://img-blog.csdnimg.cn/20200131203732325.gif
[20200131203748825.gif]: https://img-blog.csdnimg.cn/20200131203748825.gif