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。