css 右上角 翻开动画_6个超炫酷的HTML5电子书翻页动画

要实现CSS右上角翻开动画，可以使用CSS 3D转换来创建一个3D旋转效果。下面是一个简单的示例代码：

HTML:

<div class="book">
  <div class="page front-page">Front Cover</div>
  <div class="page back-page">Back Cover</div>
</div>

CSS:

.book {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
  perspective: 800px;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.front-page {
  z-index: 2;
}

.back-page {
  transform: rotateY(180deg);
}

.book:hover .front-page {
  transform: rotateY(-180deg);
}

.book:hover .back-page {
  transform: rotateY(0deg);
}

在这个示例中，我们首先创建一个包含两个页面的容器，然后将`perspective`属性设置为800像素，以创建一个3D视图。接下来，我们使用绝对定位将页面放置在容器中，并使用`z-index`属性将前一页放在后一页的顶部。最后，我们使用`transform`属性来实现页面的3D旋转效果，当鼠标悬停在容器上时，前一页会向后翻转并显示后一页。

你也可以自己尝试修改代码来实现不同的效果。