Question

看一个小提示来证明我的问题：

div:hover{
    -webkit-transform:  rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
div {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

http://jsfiddle.net/Lbq3K/

我想翻转一个div，底线在整个机芯中完全固定。我一直在谷歌搜索，但找不到解决方案。正如你可以在小提琴中看到的那样，当你将鼠标悬停在div上时，边框的底线远离底部的<hr>线，然后旋转回来。我希望旋转具有完全固定的底部边框，就像我翻转日历页面一样。我已经尝试过transform-origin来修复旋转，但它显然无法正常工作。有没有办法只做CSS？

Answer 1

如果您将变换原点放在DIV属性上，而不是放在DIV:hover中，那么它可以正常工作。
在代码中：

使用它：

div:hover{
    -webkit-transform:  rotateX(90deg);
    transform: rotateX(90deg);
}
div {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;

}

而不是：

div:hover{
    -webkit-transform:  rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
div {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

Answer 2

你听说过perspective-origin吗？我不确定，但我认为

div {
    ...
    perspective-origin:100% 100%;
}

应该适合你。我的测试成功了。 perspective-origin定义了查看者从中查看元素的点。

CSS3 - 固定侧旋转

2 个答案: