javascript - 看起来像一本被打开的精装书的 CSS 转换？

Question

我正在尝试在 div 上创建一个 CSS 转换，使其看起来像一本书的封面。

这意味着左侧是绑定(bind)的，右侧飞向用户越来越大。

谁能提供一些方向？如果它在 webkit 中工作，这就是我所需要的!

编辑:我正在寻找精装书的效果。我不希望页面 flex 或折叠，只是右侧出现在用户面前。

我已经做到了，它非常接近，但我无法将左侧锁定到位。

@-webkit-keyframes BookCover
    0%
        -webkit-transform perspective(400px) rotateY(0deg)
        opacity 1
    100%
        -webkit-transform perspective(400px) rotateY(-90deg)
        opacity 0

明白了，你需要改变原点 -webkit-transform-origin top left

Answer 1

CSS Play 有一个纯 css 动画书的演示:http://www.cssplay.co.uk/menu/peter-rabbit.html查看源代码以获得一些灵感。

为了创建更真实的 3D 效果，matrix3D tranformations是自切片面包以来最酷的东西，但目前仅在 Chrome 中受支持。

编辑:为 3D 转换创建了一个小测试 fiddle ，尝试调整它以获得您想要的结果:

http://jsfiddle.net/XnA2f/