由固定侧旋转

看一把小提琴来演示我的问题：

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上时，边框的底线将从底部的<hr>线移开，并在之后旋转。 我想旋转一个完全固定的底部边框，就像我翻转日历页面一样。 我试过转换原点来修复旋转，但它显然不起作用。 有没有办法做到这一点只是CSS？

---

如果你把你的转换原点放在你的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;
}

---

你有没有听说过视角的起源？ 我不确定，但我想

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

应该适合你。 我的测试成功了。 透视原点定义观看者正在观看元素的点。

链接地址: http://www.djcxy.com/p/71223.html

上一篇: Rotation by fixed side

下一篇: Controling CSS cube rotation(transform) and extracting values from 3d matrix