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只能走这么远。我认为Jquery可能是一个更好的选择

但是如果我在CSS中这样做，我会有一个容器div，然后使用CSS伪选择器：before或：after。它仅使用CSS将一个元素附加到另一个元素。不过，我会设计它们。然后，当用户悬停时，我将使用-webkit-transform或其他任何工具进行扩展

这里有一个家伙，他对CSS和设计都很在行，他有一个免费的例子

这里有一个指向伪选择器的链接

---

CSS Play提供了一个仅CSS动画书的演示： 看一看源代码以获得一些灵感

为了创造更真实的3D效果，这是自切片面包以来最酷的东西，但目前只有Chrome支持

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

（用手写笔书写）

HTML

<div>book cover</div>

---

请参见现场演示。

这是我刚刚为果皮效果制作的小提琴：

要想获得精装版的感觉，你必须使用rotate3d，据我所知，rotate3d只适用于iOS和Safari mac OS X

rotate3d的剥离效果（Safari OS X）

更新：

基本精装翻页

---

嘿，谢谢，我更喜欢精装翻页，用透视而不是弯曲页面。我不想要页面剥离效果。我在考虑精装版，谢谢你。我不想要一个页面剥离效果。我认为精装版，css转换使用透视和旋转y是有前途的，但我还没有弄明白。我也只需要在webkit中使用它。非常感谢，我已经用透视图获得了它，见下文。

<div>book cover</div>

div {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

div:hover {
    -webkit-transition: -webkit-transform 3s ease; 
    -webkit-transform: rotateY(-90deg) skewY(-45deg);
    -webkit-transform-origin: 0 0 0;
}

.book {
  height: 300px;
  width: 600px;
  background: red;
  position: relative;
  perspective: 2000;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2) 100%);
}

.page {
  height: 270px;
  width: 285px; 
  position: absolute;
  top: 15px;
  right: 15px;
  transition: transform 300ms linear;
  transform-origin: 0 0;
  background: white;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0, #fff 10%, #fff 50%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1;

  &:hover {
    z-index: 2;
  }



  &.flipped {
    transform: rotate3d(0, 1, 0, -180deg);
  }
}