css - 旋转X时如何使div保持在顶部

Question

我有这个：

div {
    transform:rotateX(120deg);
}

但是当我进行转换时，它会在 div 上留下一个空白区域。如何使 div 保持在顶部。

score 3 · Accepted Answer

很确定您正在寻找transform-origin.

类似的东西transform-origin: 0% 33%;适用于你的情况。

默认情况下，原点设置为50% 50%。

score 2 · Accepted Answer

要更改元素的旋转点，可以使用transform-origin.

浏览器支持是有限的，并且是前缀的，所以在这里查看更多信息：（我相信它只能在 chrome 和 safari 中用于像这样的 3D 转换）

这是一个例子：

注意第二个 div 是如何粘在顶部的。另外，请注意，如果原点位于顶部，则 120 度旋转将开始将您的元素倒置（此时您实际上看到的是元素的背面）

score 0 · Accepted Answer

就像是：

div {
    transform:rotateX(120deg);
    transform-origin:top left;
}

掌握这一点的最佳方法是假装 DIV 是一张纸，并且您将钉子钉在纸的左上角。现在，由于您在 X 轴上翻转纸张，它使用纸张的顶部作为折叠点并围绕该区域旋转。

请记住在您的 CSS 中声明“transform”和“transform-origin”的“webkit”和“ms”版本，因为 vanilla 语句尚未被普遍采用。

3 回答 3