A Pen by Simon.

Book.markdown

Book

Cubic book

A Pen by Simon on CodePen.

License.

index.jade

div.viewport
  div.book
    div.front
    div.back
    div.top
    div.bottom
    div.left
      span 风起
    div.right

style.scss

@import "compass";
@mixin cubic($length, $width, $height) {
  position: relative;
  width: $length;
  height: $height;
  @include transform-style(preserve-3d);
  div {
    position: absolute;
    top: 0;
    left: 0;
  }
  .front, .back {
    width: $length;
    height: $height;
  }
  .left, .right {
    width: $width;
    height: $height;
  }
  .top, .bottom {
    width: $length;
    height: $width;
  }
  .front {
    @include transform(translateZ($width/2));
  }
  .back {
    @include transform(translateZ(-$width/2) rotateY(180deg));
  }
  .top {
    @include transform(translateY(-$width/2) rotateX(90deg));
  }
  .bottom {
    @include transform(translateY($height - $width/2) rotateX(90deg) rotateY(180deg));
  }
  .right {
    @include transform(translateX($length - $width/2) rotateY(90deg));
  }
  .left {
    @include transform(translateX(-$width/2) rotateY(90deg) rotateY(180deg));
  }
}

.viewport {
  @include perspective(1800px);
}
.book {
  @include cubic(160px, 20px, 260px);
  @include transform(rotateY(50deg));
  div {
    background-color: rgba(0,0,0,.3);
  }
  .front {
    background-image: url('http://img3.douban.com/lpic/s27224605.jpg');
    background-size: cover;
    background-position: center;
  }
  .left span {
    display: inline-block;
    margin-top: .5em;
  }
}