使用calc（）时transform-origin y偏移位置

Question

在下面的演示中，我使用的是transform-origin：

transform-origin: 50% calc(100% + 6em);

y偏移值设置为calc(100% + 6em)，但是我将y偏移的值设置为？我可以看到它是+ 6em，但+ 6em来自哪里，确切地说？

.container {
  width: 400px;
  height: 400px;
  background: red;
  margin: 0 auto;
  cursor: pointer;
}
.me {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #444;
  background: pink;
  margin: 20% auto;
  transition: 2s;
  transform: rotateZ(45deg);
  transform-origin: 50% calc(100% + 6em);
  cursor: pointer;
}
.container:hover .me {
  transform: rotateZ(0deg);
}

<div class="container">
  <div class="me"></div>
</div>

Answer 1

当transform-origin给出两个值时，如您的示例所示，它使用"two-value syntax"设置x偏移和y偏移：

transform-origin: x-offset y-offset   

百分比值长度基于设置变换原点的元素。

• x-offset 从元素的左侧开始。 50%绘制元素正中间的x偏移位置。

• y-offset 从元素的顶部开始。 100% + 6em绘制元素底部的y偏移位置加上额外的6 em 。

x和y偏移相遇形成单个点，此处显示两条橙色线相交：

偏移位置 - 实例

在此示例中，偏移的位置显示为两个伪元素。

您可以更改CSS底部的前后伪元素的两个值，以便轻松显示偏移点位置的位置。更改CSS注释中显示的值以直观地绘制点。

＆＃13;

＆＃13;

.container {
  width: 400px;
  height: 400px;
  background: #000;
  margin: 0 auto;
  cursor: pointer;
  position: relative;
  margin-top: 100px;
}
.container:after {
  content: '';
  display: block;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
}
.me {
  position: relative;
  width: 200px;
  height: 200px;
  background: pink;
  transition: 2s;
  transform: rotateZ(45deg);
  cursor: pointer;
}
.me:before {
  content: '';
  display: block;
  height: 5px;
  position: absolute;
  margin-top: -5px;
  left: 0;
  background: #F90;
}
.me:after {
  content: '';
  display: block;
  width: 5px;
  position: absolute;
  top: 0;
  margin-left: -5px;
  background: #F90;
}
.container:hover .me {
  transform: rotateZ(0deg);
}
.me {
  /* x-offset | y-offset */
  transform-origin: 50% calc(100% + 6em);
}
.me:after {
  height: calc(100% + 6em); /* Set to y-offset value */
  left: 50%; /*  Set to x-offset value */
}
.me:before {
  width: 50%; /*   Set to x-offset value */
  top: calc(100% + 6em);  /*  Set to y-offset value */
}

＆＃13;

<div class="container">
  <div class="me"></div>
</div>

＆＃13;

＆＃13;

＆＃13;