Question

说明：

我有一个像Windows 8中那样具有地铁风格标签的页面。现在，用户可以点击任何标签页面，然后转到某个页面。我想要的是，当用户点击任何标签时，它应该向后铰接一点，当点击被释放时应该回来，就像我们打开一扇门然后关闭它一样。

我尝试了什么：

我试图沿着Y轴（一般是z轴）添加旋转，但它不会像它应该的那样工作。

找到任何帮助：

我看过几个教程，教授如何在3D中完全旋转图像但有些教程有点复杂，有些教程的代码比实际问题长。任何人都可以帮助我吗？

Answer 1

这是你想要的吗？ http://jsfiddle.net/uzthcu0v/24/

CSS

#div1 {
    position: relative;
    height: 100px;
    width: 150px;
    margin: 50px;
    border: 1px solid black;
    perspective: 150px;
    perspective-origin: 0 50%;
    background-color: black;
}

#pom {
    height: 100px;
    width: 150px;
    position: absolute;
    border: 1px solid black;
    background-color: yellow;
    transform-origin: 0% 50%;
    transition: all .2s ease-out;

}

.rotate{ transform: rotateY(25deg); }

Answer 2

喜欢这个？ http://jsfiddle.net/HamishT/uzthcu0v/26/

我没有使用javascript，只是css3 3d效果：

#pom {
    width: 200px;
    height: 100px;
    background-color: yellow;
    border-radius: 3px;
    border: solid #444444 3px;
    -webkit-transition: -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: transform 1s;
    transform-origin: 0% 50%;
}

#pom:active {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
}

门像铰链在一个div

2 个答案:

CSS