使用rotateX（）时，沿其底轴而不是其中心旋转元素

Question

我似乎无法使div元素围绕其底部边缘旋转。默认情况下，rotateX（angle）使元素绕其中心旋转。

这里是一个代码笔：Trying to flip div over bottom edge

我尝试使用transform-origin属性，但似乎没有任何效果。

Answer 1

问题在悬停时是正确的，它已旋转（绕X轴），并使:hover状态无效。这种方式非常敏感，可能取决于不同的浏览器。解决方案是尝试使用占位符（动画时其大小和位置固定）包装实际的翻转卡：

HTML：

<div class='placeholder'>
 <div class="flipper forward">
   Hello
 </div>
</div>    

SCSS：

.placeholder {
  width: 200px;
  height: 50px;  
  margin: 30px auto;
}
.flipper {
  background: red;
  text-align: center;
  line-height: 50px;
  width:100%;
  height:100%;
  border: 1px solid darkred;  
  //@include backface-visibility(hidden);
  -webkit-transform-origin: left bottom;
  @include transition(-webkit-transform 2s);
  @include transform(rotateX(0deg));  
}
.placeholder:hover > div {
  @include transform(rotateX(180deg));
}

Updated demo。

Answer 2

使用变换原点

-webkit-transform-origin: $x $y;
-moz-transform-origin: $x $y;;
-o-transform-origin: $x $y;
transform-origin: $x $y;