纯CSS的3D变换

Question

我正在尝试使用纯CSS重建这个，并且我已经实现了这个。但是从Flash版本中可以看出的想法是，当封面出现时，其他div会为悬停在其上的div腾出空间。

我尝试将宽度设置为自动，并在特定的div上设置过渡属性，但没有成功。我还尝试在悬停前将div的宽度设置为0，在悬停时将其设置为300px，这确实起到了作用，但并没有真正地产生动画效果。

也许问题很简单，或者不简单，但无论如何，能够给予正确方向的推动都将是非常好的！

谢谢。

- dandoen

Answer 1

您不需要WebGL浏览器，只需使用普通的3D变换即可实现此功能。

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

您应该为悬停宽度更改使用包装div和变换的子div。

嵌套是变换的关键。

这是jsfiddle演示它的链接：http://jsfiddle.net/ZMqze/4/ 需要稍微修改以实现取消悬停的效果。

- Michael Mullany

---

是的，不幸的是，我认为你需要一些JS来同时改变宽度。 - Rich Bradshaw

你不需要 JavaScript 来完成这个。 - Michael Mullany

你可能想使用JS来处理z-index问题。 - Rich Bradshaw

不要认为一旦动画完成，就需要使用JS处理z-index问题。我认为它们不会重叠，因为宽度需要几毫秒才能恢复到原来的状态。现在唯一的问题是为什么它不会动画宽度。 - dandoen

发现需要将过渡属性也赋予扩展后的 div 的悬停状态。至于 z-index 问题，我部分正确。将 div 宽度的扩展过渡设置为 0.2 秒后，您将不会看到重叠的内容。这是更新版本：http://jsfiddle.net/dandoen/ZMqze/6/ - dandoen

我对结果感到非常满意：http://jsfiddle.net/dandoen/ZMqze/8/embedded/result/现在唯一的问题是，当你快速悬停在几个时，事情会变得很丑陋。我尝试延迟动画，但效果并不好。欢迎提供建议 :) - dandoen

Answer 2

你可以在CSS3中使用3D变换功能。这将允许您获得所需的效果。您可以创建两个<div>，一个用于正面，另一个用于背面。通过使用z-index使正面重叠背面，并通过使用position: absolute将它们放置在相同的位置。还可以通过设置backface-visibilty: none使它们的背面不可见。然后将它们包装在<div class="flipper">中，并将翻转动画添加到其中。 将翻转器包装在<div class="container">中。

.container {
    perspective: 1000;
}

透视(Perspective)将允许动画变成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

- Asif Mallik

Answer 3

首先，您需要一个支持硬件加速的WebGL浏览器（在Windows XP下只有Safari5，而在Linux或Win7上则是WebKitNightly自定义版本）

• 将侧面和封面放在一个名为wrapper的单个div中，该div具有transform属性的过渡效果（例如1秒缓动等）
• 您必须通过绕Y轴旋转90度来“隐藏”封面
• 添加一个wrapper:hover类，它会绕Y轴自身旋转-90度

如果我以后有更多时间，我会尝试给您提供确切的CSS，但这些说明应该可以帮助您实现所需的结果。

- japrescott

---

谢谢您的回复，我不明白为什么它需要一个WebGL浏览器。是为了进行“简单”的3D变换吗？ - dandoen

在不同的系统上，我可以使用matrix3d CSS过渡选项/属性，但没有3D效果。唯一支持3D的浏览器是Safari在WinXP上或带有Qt的Webkit的夜间版本（也在Linux上支持3D）...也许我在配置中缺少参数以启用此功能... - japrescott