CSS 2D转换和源点的影响原理（translate、scale、skew、rotate）

最新推荐文章于 2024-05-23 18:26:22 发布

「已注销」

最新推荐文章于 2024-05-23 18:26:22 发布

阅读量744

点赞数 3

分类专栏： # H5C3 文章标签： css html

本文链接：https://blog.csdn.net/Ares5kong/article/details/116199305

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

1. 源点（transform-origin）

使用2d转换时建议搭配CSS过渡效果，效果更柔和一点。

1. 源点（transform-origin）

作用:

元素在进行某些2D转换时会以源点为基础, 源点的默认位置是元素的正中央,

当默认的源点位置不满足我们的需求时, 可以对源点位置进行修改,

测试后感觉只有缩放和旋转受源点位置影响。

语法：

transform-origin: x轴位置 y轴位置;

取值可以使用像素、百分比、和方位值（top、left、bottom、right）

效果：

先展示一下修改源点位置后的效果, 具体作用后面细说

2. 移动（translate）

语法:

横向移动	transform: translateX(X轴移动像素或百分比);
纵向移动	transform: translateY(Y轴移动像素或百分比);
双向移动连写	transform: translateX(X轴移动像素或百分比) translateY(Y轴移动像素或百分比)
双向移动简写	transform: translate(X轴移动像素或百分比, Y轴移动像素或百分比)

理论：

(1) 移动不受源点影响

(2) translateX: 正数右移, 负数左移

(3) translateY: 正数下移, 负数上移

(4) 当使用百分比移动时，百分比指的是自身宽度

transform: translateX(50%); 向右移动自身宽度的50%

transform: translateY(50%); 向下移动自身高度的50%

效果:

3. 缩放（scale）

语法:

横向缩放	transform: scaleX(元素宽度缩放比例)
纵向缩放	transform: scaleY(元素高度缩放比例)
双向缩放连写	transform: scaleX(元素宽度缩放比例) scaleY(元素高度缩放比例)
双向缩放简写	transform: scale(元素宽度缩放比例, 元素高度缩放比例)

缩放比例:

n = 1: 元素默认比例

n > 0: 放大效果

0 < n < 1: 缩小效果

效果:

原理：

缩放确实会改变盒子大小, 但是并不一定是盒子两侧均衡缩放, 可能左边的多一点,右边少一点, 也可能右边多一点, 左边少一点。

这一切都是源点位置决定的, 具体的原理如下:

scaleX：可以理解为源点把元素的宽度一分为二, 而scaleX 就是分别对源点左右两侧的宽度进行倍增

scaleY：可以理解为源点把元素的高度一分为二, 而scaleY 就是分别对源点上下两侧的高度进行倍增

4. 倾斜（skew）

语法：

横向倾斜	transform: skewX(倾斜角度);
纵向倾斜	transform: skewY(倾斜角度);
双向倾斜连写	transform: skewX(倾斜角度) skewY(倾斜角度);
双向倾斜简写	transform: skew(倾斜角度, 倾斜角度);

理论：

(1) 倾斜不受源点影响

(2) skewX是正数: 元素上边界向左移动, 下边界向右移动, 直到左上角的角度为指定角度

(3) skewX是负数: 元素上边界向右移动, 下边界向左移动, 直到右上角的角度为指定角度

(4) skewY是正数: 元素左边界向上移动, 右边界向下移动, 直到左上角的角度为指定角度

(5) skewY是负数: 元素左边界向下移动, 右边界向上移动, 直到右上角的角度为指定角度

效果：

5. 旋转（rotate）

语法：

transform: rotate(旋转度数) //单位deg

理论：

(1) 角度为正数: 以源点为轴顺时针旋转指定度数

(2) 角度为负数: 以源点为轴逆时针旋转指定度数

效果：

模拟一个源点, 可以更好的看懂旋转和源点的关系

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2D转换</title>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin-left: 200px;
      margin-top: 200px;
      background-color: skyblue;
    }

    /*模拟默认源点*/
    .origin {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background-color: black;
      border-radius: 3px;
    }

    /*模拟右上角源点*/
    .origin2 {
      position: absolute;
      top: 0;
      left: 100%;
      transform: translateX(-100%);
      width: 6px;
      height: 6px;
      background-color: black;
      border-radius: 3px;
    }

    /*以默认源点为轴旋转*/
    .box:first-child:hover {
      transform: rotate(70deg);
    }

    /*以自定义的源点位置为轴旋转*/
    .box:last-child:hover {
      transform: rotate(70deg);
      transform-origin: 100% 0;
    }
  </style>
</head>
<body>
<div class="box">
  Rotate
  <div class="origin"></div>
</div>
<div class="box">
  Rotate
  <div class="origin2"></div>
</div>
</body>
</html>