旋转时如何让div保持在顶部

Question

我有这个：

div {
    transform:rotateX(120deg);
}

但是当我进行转换时，它在div上留下了一个白色空间。如何让div保持在最顶层。

Answer 1

非常确定您正在寻找transform-origin。

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

jsFiddle here - 玩弄它。

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

See MDN documentation.

Answer 2

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

浏览器支持受限且带有前缀，因此请在此处查看以获取更多信息： （我相信它只适用于像我这样的3D转换的chrome和safari）

http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

以下是一个例子：

http://jsfiddle.net/zAZuY/1/

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

Answer 3

类似的东西：

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

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

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