变换器角度 div - CSS

在CSS中，变换器角度（transform-origin）属性定义了一个元素变换的起点，即它的变换中心点，通常为元素的中心点。该属性接受由2到3个值的数字或单词组成的值，它们表示了元素的X, Y和Z轴坐标。

语法

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

其中，x-axis、y-axis和z-axis是长度值，可以使用不同的CSS长度单位。

如果只提供两个参数，则第三个默认为0。

例子

让我们看几个例子，以更好地理解变换器角度（transform-origin）属性。

例1：自定义角度

在下面的例子中，我们将一个矩形绕着它的左上角旋转。默认情况下，旋转中心点是元素的中心点。

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transform: rotate(45deg);
  transform-origin: left top;
}

例2：绝对定位的元素

在下面的例子中，我们使用绝对定位来把元素放在页面的右下角，然后让它绕着它的右下角旋转。

div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transform: rotate(45deg);
  transform-origin: right bottom;
}

例3：3D旋转

在下面的例子中，我们旋转一个3D盒子，在所有轴上都设置了变换器角度。

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transform-style: preserve-3d;
  animation: spin 4s infinite linear;
}

@keyframes spin {
  from { transform: rotateX(0) rotateY(0) rotateZ(0); }
  to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.box:before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  top: -50px;
  left: 0;
  transform: rotateX(90deg);
  transform-origin: top;
}

.box:after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: -50px;
  transform: rotateY(90deg);
  transform-origin: left;
}

例4：变换器角度和过渡动画

在下面的例子中，我们使用hover伪类来为元素添加一个动画的效果。

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 1s;
  transform-origin: center;
}

div:hover {
  transform: scale(1.5);
}

结论

变换器角度（transform-origin）是一个非常强大和有用的CSS属性，可以让你控制一个元素的旋转或缩放的中心点。它可以帮助你创造更复杂的3D效果，并使你的布局更加灵活和可控。