Question

我正在尝试使用纯css重建this。而且我已经this了。但是你可以从flash版本中看到的想法是，当封面出现时，其他div会为悬停的那个腾出空间。

我试图在auto上设置宽度，并在该特定div上设置了转换属性，但没有运气。我还尝试在悬停之前将div的宽度设置为0，并在悬停时将其设置为300px，这样做就可以了，但它并没有真正动画..

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

感谢。

Answer 1

您不需要WebGL浏览器就可以通过简单的3D变换实现此目的。

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

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

嵌套是改变理智的关键。

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

需要更多的润色才能解开。

Answer 2

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

内

.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的webkitnightly custombuild - 或win7）

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

如果我以后有更多时间，我会尝试给你一个确切的css，但这些说明会引导你达到你想要的结果。

用纯CSS进行3d变换

3 个答案: