5

我正在尝试用纯 css重建它。而我已经走到了这一步。但是从 Flash 版本中可以看出，当封面出现时，其他 div 会为悬停的 div 腾出空间。

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

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

谢谢。

4

3 回答 3

3

您不需要 WebGL 浏览器，您可以使用纯 3D 转换来完成此操作。

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

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

嵌套是改变理智的关键。

这是显示它在行动中的 jsfiddle：http: //jsfiddle.net/ZMqze/4/

悬停需要多一点润色。

于 2011-07-06T17:50:44.603 回答
0

您可以使用 CSS3 中的 3D 转换功能。它会让你得到你想要的效果。您可以创建两个<div>s。一个用于正面，另一个用于背面。使用 使正面与背面重叠，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

于 2013-12-05T05:48:36.517 回答
-1

首先，您需要一个支持硬件加速的 webgl 浏览器（这只是 windowsxp 下的 safari5，顺便说一句。和 webkitnightly custombuild for linux - 或 win7）

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

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

于 2011-07-06T08:37:49.010 回答