Question

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

这是一个codepen：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));
}

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

1 个答案:

Updated demo