Html CSS转换原点未按预期工作

我试图在CSS中创建一个翻转效果，但我希望div向下翻转，这样动画的中心点就是底边

我认为

转换原点：0 100%

将为我创建所需的效果，但它并不完全正确。我已经创造了一个能说明问题的模型。注意到红色div的底边在翻转之前是如何抬起的。有人知道如何纠正这个问题吗

这里还有我的HTML和CSS供参考

#f1_container {
  position: relative;
  width: 200px;
  height: 100px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
.thing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateX(180deg);
  transform-origin: 0 100%;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: red;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
    <div class="thing">
        <p>This is some text</p>
    </div>
    <div id="f1_card">
        <div class="front face">
        </div>
        <div class="back face center">
            <p>This is nice for exposing more information about an image.</p>
        </div>
    </div>
</div>

#f1#u容器{
位置：相对位置；
宽度：200px；
高度：100px；
z指数：1；
}
#集装箱{
前景：1 000；
}
.事情{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#ffffff；
}
#f1_卡{
宽度：100%；
身高：100%；
变换样式：保留-3d；
过渡：所有1.0线性；
}
#f1#容器：悬停#f1#卡{
变换：rotateX（180度）；
变换原点：0.100%；
}
.脸{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
背景色：红色；
}
.正面{
显示：块；
变换：rotateX（180度）；
框大小：边框框；
填充：10px；
颜色：白色；
文本对齐：居中；
背景色：#aaa；
}
这是一些文本

这非常适合于公开有关图像的更多信息

将

变换原点

属性移动到

#f1_卡

选择器

#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
  transform-origin: 0 100%;
}

---

在代码中，您只更改了悬停时的变换原点。因此，它从

50%50%

（默认值）转换为

0%100%

，因为您在

transition

属性中使用了

all

。

啊，是的，您是对的，这很有意义。谢谢你的帮助！