CSS transform-origin不能按预期工作

Question

我正试图在CSS中创建一个正在工作的翻转效果，但我希望div向下翻转，所以动画的中心点是底部边缘。

我认为transform-origin: 0 100%;会为我创造所需的效果，但它不是很正确。我创建了this JSFiddle，显示了问题。注意到红色底部的底边在翻转之前如何提升。有谁知道如何解决这个问题？

而且，这里是我的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> 

Answer 1

的transform-origin财产移到#f1_card选择。

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

https://jsfiddle.net/325d8m57/1/

在你的代码只改变了悬停变换原点。所以它从50% 50%（默认值）转换为0% 100%，因为您在transition属性中使用了all。