css - 使用 rotateX() 时，将元素旋转到其底部轴而不是其中心

Question

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

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

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

Answer 1

使用变换原点

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