3D mobile phone CSS

by neonDog

HTML

<div class="camera">
    <div class="object">
      <div class="front-face"></div>
      <div class="back-face"></div>
      <div class="top-face side"></div>
      <div class="bottom-face side"></div>
      <div class="left-face side"></div>
      <div class="right-face side"></div>

      <div class="tr-corner corners">
        <div class="piece-1"></div>
        <div class="piece-2"></div>
        <div class="piece-3"></div>
        <div class="piece-4"></div>
      </div>
      <!-- / tr-corner -->

      <div class="tl-corner corners">
        <div class="piece-5"></div>
        <div class="piece-6"></div>
        <div class="piece-7"></div>
        <div class="piece-8"></div>
      </div>
      <!-- / tl-corner -->

      <div class="bl-corner corners">
        <div class="piece-9"></div>
        <div class="piece-10"></div>
        <div class="piece-11"></div>
        <div class="piece-12"></div>
      </div>
      <!-- / bl-corner -->

      <div class="br-corner corners">
        <div class="piece-13"></div>
        <div class="piece-14"></div>
        <div class="piece-15"></div>
        <div class="piece-16"></div>
      </div>
      <!-- / br-corner -->
    </div>
  </div>

SCSS

@import "compass/css3";

$box-w: 200px;
$box-h: 400px;
$box-d: 30px;
$box-r: 20px;
$piece-num: 16;
$background-color: #333;

// create a 3d box
@mixin box($width, $height, $depth) {
  width: $width;
  height: $height;
  position: relative;
  @include transform-style(preserve-3d);

  > div {
    position: absolute;
  }

  .front-face,
  .back-face {
    width: $width;
    height: $height;
    background: #000;
  }

  .front-face {
    @include transform( translateZ($depth / 2) );
  }

  .back-face {
    @include transform( rotateY(180deg) translateZ($depth / 2) );
  }

  .top-face,
  .bottom-face {
    width: $width;
    height: $depth;
  }

  .top-face {
    top: 0;
    @include transform( rotateX(90deg) translateZ($depth / 2) );
  }

  .bottom-face {
    bottom: 0;
    @include transform( rotateX(-90deg) translateZ($depth / 2) );
  }

  .left-face,
  .right-face {
    width: $depth;
    height: $height;
  }

  .left-face {
    left: 0;
    @include transform( rotateY(-90deg) translateZ($depth / 2) );
  }

  .right-face {
    right: 0;
    @include transform( rotateY(90deg) translateZ($depth / 2) );
  }
}

// make some space for corners
@mixin clip-corner($width, $height, $radius) {
  .front-face,
  .back-face {
    border-radius: $radius;
  }

  .top-face,
  .bottom-face {
    width: $width - 2 * $radius;
    margin-left: $radius;
  }

  .left-face,
  .right-face {
    height: $height - 2 * $radius;
    margin-top: $radius;
  }
}

// create a circle
@mixin roll($angle, $radius, $piece-num, $height) {
  @include transform-style(preserve-3d);

  $a: $angle / $piece-num;
  $k: $radius * cos($a / 2);
  $width: round(2 * $radius * sin($a / 2));

  @for $i from 1 through $piece-num {
    $b: $a * ($i - 1) + $a / 2;
    $x: round($k * cos($b));
    $y: round($k * sin($b));
    $rotate: 90deg - $b;

    .piece-#{$i} {
      width: $width;
      height: $height;
      position: absolute;
      -webkit-transform: translateX($x) translateZ($y) rotateY($rotate);
    }
 ...