javascript – 看起来像正在打开的精装书的CSS转换？

我正在尝试在div上创建一个CSS变换,使其看起来像书的开头.

这意味着左侧是绑定的,右侧飞向用户变大.

有人可以提供一些方向吗？如果它在webkit中工作,那就是我所需要的！

编辑：我正在寻找你会发现精装书的效果.我不希望页面弯曲或折叠,只是右侧出现在用户.

我做到了这一点,它非常接近,但我不能让左侧锁定到位.

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

得到它,你需要改变orgin -webkit-transform-origin左上角

解决方法

CSS Play只有一个css的翻译手册： http://www.cssplay.co.uk/menu/peter-rabbit.html
看一下灵感来源.

为了创造更真实的3D效果,matrix3D tranformations是自切片面包以来最酷的东西,但目前仅支持Chrome.

编辑：
为3D变换创建了一个小小的测试小提琴,尝试调整它以获得您想要的结果：

http://jsfiddle.net/XnA2f/

原文地址：https://www.jb51.cc/js/157855.html