Question

我有以下CSS变换，我正在尝试理解它们之间的关系，以便我可以弄清楚如何补偿其中一个。

这是我的代码：

＆＃13;

.background {
  height: 720px;
  position: absolute;
  width: 1280px;
  background-color: rgb(205, 163, 163);
}
.text {
  transform: matrix(0, 1, -1, 0, 700, 206.66071428571);
  width: 306px;
  position: absolute;
  height: 120px;
  font-size: 120px;
  color: rgb(255, 0, 0);
}
.top-left {
  transform-origin: top left;
}
.center-center {
  transform-origin: center center 0px;
}

＆＃13;

<div>
  <div class="background"></div>
  <div class="top-left text">
    <p>TEXT</p>
  </div>
  <div class="center-center text">
    <p>TEXT</p>
  </div>
</div>

＆＃13;

transforms-origin: center center;

和

transform-origin: top left;

CSS属性是否有问题。

您将看到两段文本，两条文本具有相同的属性，但它们的变换原点除外。

我试图理解为什么带有＆＃34;中心的文本＆＃34;原产地被放置在原处。我会假设它的边界框的中心点＆＃34;将在另一段文本的边界框左上角的同一位置？

我希望弄清楚两者之间的关系，以便我可以将文本转移到＆＃34;中心＆＃34;起源取代其他文本。

Answer 1

为了更容易理解，我已经改变了矩阵以进行近似复合变换。你有翻译和旋转90度。我已经减少了翻译量，以便它更容易适应代码段。但数学仍未改变。

现在注意到变换的中心（等待动画发生）不在你想象的地方，div与ps不在同一个地方。我在div中添加了一个边框，以便更容易看到。

关于所涉及的翻译，您正在围绕div的中心旋转。或左上角。这些点之间的距离是div宽度的一半，高度的一半：

153px 60px

现在，当您旋转90度时，等效翻译是总和以及其余值：

213px 93px

将鼠标悬停在代码段上以查看应用的值，以及2 ps对齐的

.background {
  height: 99%;
  position: absolute;
  width: 100%;
  background-color: rgb(205, 163, 163);
}
.text {
  transform: translate(300px, 100px) rotate(90deg);
  width: 306px;
  position: absolute;
  height: 120px;
  font-size: 120px;
  color: rgb(255, 0, 0);
  border: solid 1px black;
  animation: show 4s infinite;
  
}
.top-left {
  transform-origin: top left;
}
.center-center {
  transform-origin: center center 0px;
}

@keyframes show {
    0% {  transform: translate(300px, 100px) rotate(90deg);}
    5% {  transform: translate(300px, 100px) rotate(90deg);}
  100% {  transform: translate(300px, 100px) rotate(0deg);}
}

body:hover .text {
  animation: none;
  }

body:hover .center-center p {
    transform: translate(93px, 213px);  
}

p {transition: 1s; }

<div>
  <div class="background"></div>
  <div class="top-left text">
    <p>TEXT</p>
  </div>
  <div class="center-center text">
    <p>TEXT</p>
  </div>
</div>

在一般情况下要理解。在数学意义上，改变变换原点是相同的，可以进行平移（从一个原点到另一个原点），应用变换，并进行平移的反转。

这个翻译，因为你从中心向左移动，是宽度的一半，高度的一半。

当您将此矩阵应用于此值时，统一项可忽略不计，并以x2 = x1 * a00 + y1 * a01和y2 = x1 * a10 + y1 * a11结束。

最后一个动作是最后一个微积分减去第一个微积分。只需检查我的原始答案是您问题中提供的矩阵的特殊情况

Answer 2

transform-origin属性允许您更改已转换元素的位置。

2D变换可以改变元素的x轴和y轴。 3D变换也可以改变元素的z轴。

更好地了解情况。以下是来自 W3schools.com ：http://www.w3schools.com/cssref/trycss3_transform-origin_inuse.htm

的现场演示

带有浏览器前缀的CSS示例。

<强> CSS

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}

试图理解这些CSS转换之间的关系

2 个答案: