使用纯 CSS 进行 3d 转换

Question

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

我试图在 auto 上设置宽度并在该特定 div 上设置过渡属性，但没有运气。我还尝试在悬停之前将 div 的宽度设置为 0，并在悬停时将其设置为 300px，这确实有效，但它并没有真正设置动画..

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

谢谢。

Answer 1

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

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

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

嵌套是转变理智的关键。

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

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