Css 使用rotateX（）时，在元素的底轴而不是其中心上旋转元素

我似乎无法使div元素围绕其底边旋转。默认情况下，RotateAngle使图元围绕其中心旋转

这是一个密码笔：

---

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

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

HTML:

.使用变换原点

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

---

为元素设置一个变换原点：在我的问题中，我说我试过了，但是我使用的组合不起作用。它似乎是：悬停状态没有被应用。如果手动在元素上强制：悬停状态，则即使应用了“变换原点”，也会设置动画。我正在测试Chrome35。

.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));
}

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