A Pen by Simon.

index.jade

div.viewport
  div.cubic
    div.front
    div.back
    div.top
    div.bottom
    div.left
    div.right
    div.vinyl

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);
}
.cubic {
  div {
    background: rgba(0, 0, 0, .3);
    border: 1px solid;
  }
  @include cubic(200px, 40px, 200px);
  @include transform(rotateY(-30deg) rotateX(10deg) translate(100%, 100%));
  .front {
    background-image: url('http://img3.douban.com/lpic/s27205900.jpg');
    opacity: .9;
    background-size: cover;
    background-position: center;
  }
  .vinyl {
    border-radius: 100px;
    border: 1px solid #ccc;
    background: #000;
    width: 200px;
    height: 200px;
    @include transform(translateX(40px));
    position: relative;
    &:before {
      content: "";
      background: #fff;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%, -50%));
    }
  }
}

Vinyl-with-cover-and-case.markdown

Vinyl with cover and case

Cubic style

A Pen by Simon on CodePen.

License.