html - CSS3 - 固定边旋转

Question

请看一个 fiddle 来演示我的问题:

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。我一直在谷歌上搜索很多，但找不到解决方案。正如您在 fiddle 中看到的那样，当您将鼠标悬停在 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;
}