Question

我正在尝试在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 top left

Answer 1

CSS Play有一个仅限css的翻译演示程序：http://www.cssplay.co.uk/menu/peter-rabbit.html 看一下灵感来源。

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

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

http://jsfiddle.net/XnA2f/

Answer 2

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

http://jsfiddle.net/pixelass/TW43V/17/

对于精装感觉你必须使用rotate3d，据我所知，这只适用于iOS和Safari mac OS X.

使用rotate3d（Safari OS X）剥离效果

http://jsfiddle.net/pixelass/TW43V/18/

更新：

基本精装翻盖

Hardcover CSS flip

.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);
  }
}

Answer 3

这是一个工作示例http://www.romancortes.com/ficheros/page-flip.html

Answer 4

我以前从未这样做过，但我认为CSS只能走得那么远。我认为Jquery可能是一个更好的选择。

但是如果我在CSS中这样做，我会有一个容器div然后使用CSS伪选择器：before或：after。只使用CSS将元素附加到另一个元素。不过我会把它们打造出来。然后，当用户徘徊等时，我会使用-webkit-transform或其他任何内容进行扩展。

Heres是一个非常善于使用CSS和设计的人，他有一个免费的例子 http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/

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

http://w3schools.com/cssref/sel_before.asp

Answer 5

@-webkit-keyframes BookCover
    0%
        -webkit-transform perspective(400px) rotateY(0deg)
        -webkit-transform-origin top left
    100%
        -webkit-transform perspective(400px) rotateY(-90deg)
        -webkit-transform-origin top left

（用手写笔写）

Answer 6

<强> HTML

<div>book cover</div>

<强> CSS

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;
}

请参阅fiddle了解即时演示。

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

6 个答案:

基本精装翻盖