使用 CSS 对 div 进行 3d 翻转答案

【问题标题】：3d flipping of div using CSS使用 CSS 对 div 进行 3d 翻转
【发布时间】：2014-07-24 04:29:19
【问题描述】：

我需要一些关于仅使用 CSS 正确 3D 翻转 div 的帮助。这是我的代码： HTML：

<body>
<div class="cube">
    <div class="flip">
        <h1>Flip</h1>
    </div>
    <div class="flop">
        <h1>Flip</h1>
    </div>
</div>
</body>

CSS：

/* Set-up */
body {
        color: rgb(6, 106, 117);
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100%;
    background: #F4F6F8;
    padding: 3em 0 0 0;
    line-height:62px;   
}
.cube {
        width: 100px;
    text-align: center;
    margin-left:20px;
    height: 100px;

    -webkit-transition: -webkit-transform .33s;
    transition: transform .33s; /* Animate the transform properties */

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
}
.flip,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);

-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
  }

.flip {
-webkit-transform: translateZ(100px);
transform: translateZ(50px);
}

.flop {
-webkit-transform: rotateY(90deg) translateX(-50px) translateY(-100px) translateZ(50px);
transform: rotateY(-90deg) translateX(-50px);
}


.cube:hover {
-webkit-transform: rotateY(-89deg);
transform: rotateY(89deg); /* Text bleed at 90º */
}

我尝试编写翻转 div 的代码，就像本网站左侧站点上的导航选项卡一样：http://www.triplagent.com/best-of-newyork

但是在翻转立方体的过程中会向左移动。我哪里错了？请帮忙！

jsfiddle 链接：http://jsfiddle.net/dN5RW/

【问题讨论】：

为什么-webkit-transform和trasnform在同一个样式中的值不同？
codepen.io/vsync/pen/JKNGqO

标签： css 3d web jquery-animate flip

【解决方案1】：

问题的解决方案很明显：transform 的值不正确。测试了几分钟我就成功了：http://jsfiddle.net/dN5RW/1/

但是这个解决方案还有一些问题：它在 Chrome 上运行良好，但在 IE 上不行。您需要解决 trasnform 和 -webkit-transform 在同一样式上具有不同值的问题。

【讨论】：

不，不是因为这个。前缀 -webkit 与 tranform 属性一起使用，以便在特定浏览器（在本例中为 Chrome）中提供支持。问题出在轴上。我修好了它。还是谢谢。
好的。请解释你是如何改变轴的，以防有人遇到同样的问题

【解决方案2】：

我可以让它完全像上面提到的网站一样。 http://www.triplagent.com/best-of-newyork

我在下面添加了以下动画

.flip {
}

.flop {
-webkit-transform : rotateY(-90deg) translateX(-50px);

}

.cube:hover {
-webkit-transform: translateX(50px) rotateY(90deg);
}

http://jsfiddle.net/dN5RW/4/

【讨论】：