使用纯 CSS 进行 3D 变换

Question

我正在尝试用纯CSS重建 this 。我已经这了。但正如您从 Flash 版本中看到的那样，当封面出现时，其他 div 会为悬停的 div 腾出空间。

我尝试将宽度设置为自动，并在该特定 div 上设置了过渡属性，但没有成功。我还尝试在悬停之前将 div 的宽度设置为 0，并在悬停时将其设置为 300px，这确实达到了目的，但它并没有真正实现动画。

它可能很简单，也可能不是，但无论哪种方式都很好朝着正确的方向推动！

谢谢。

Answer 1

您不需要 WebGL 浏览器，您可以通过简单的 3D 转换来完成此操作。

当您悬停时，您必须显式更改 div 的宽度，因为显式转换不会触发重新布局。您需要对本书的内容进行绝对定位。

您应该使用包装 div 来更改悬停宽度，并使用子 div 来进行转换。

嵌套是转变理智的关键。

这是显示其实际效果的 jsfiddle： http://jsfiddle.net/ZMqze/4/

需要多一点润色才能实现悬停。

Answer 2

您可以使用 CSS3 中的 3D 变换功能。它将使您获得您想要的效果。您可以创建两个

。一个用于正面，另一个用于背面。使用z-index使正面与背面重叠，并使用position:absolute将它们放在同一位置。还可以通过设置 backface-visibilty: none 来使其背面不可见。然后将它们包裹在

中，并为其添加翻转动画。
将脚蹼包裹在

.container {
    perspective: 1000;
}

透视中将允许动画为 3D（确保使用供应商前缀）。

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

翻转器必须具有相对位置，因为内部的两个元素将相互重叠并且将处于绝对位置（确保将供应商前缀添加到过渡和过渡样式）。

.container:hover .flipper{
    transform: rotateY(180deg);
}

然后，您只需添加这段代码即可使翻转器在将鼠标悬停在其包装上时翻转。
此视频教程将有所帮助：http://www.youtube.com/watch?v=6ObIO -SjMZc

Answer 3

首先，您需要一个支持硬件加速的 webgl 浏览器（仅支持 windowsxp 下的 safari5，顺便说一句。以及适用于 linux 或 win7 的 webkitnightly custombuild）

• 将侧面和封面放在一个名为wrapper 的 div 中，该 div 具有转换属性的过渡（像 1s 缓动左右）
• 您必须通过绕 Y 轴旋转 90 度来“隐藏”封面，
• 添加一个自行旋转 -90 度的包装器：悬停类围绕 Y 轴

，如果我稍后有更多时间，我会尝试为您提供准确的 css，但这些说明应该会引导您获得所需的结果。