phone.html

---
layout: default
title: Phone
newstylesheet: "iphone"
---

<div class="phone-container">
  <div class="phone">
    <div class="front"> </div>
    <div class="back"> </div>
    <div class="left"> </div>
    <div class="left-top"> </div>
    <div class="left-bottom"> </div>
    <div class="right"> </div>
    <div class="right-top"> </div>
    <div class="right-bottom"> </div>
    <div class="shadow"> </div>
  </div>
</div>

HTML:

<pre><code>&lt;div class=&quot;phone-container&quot;&gt;
  &lt;div class=&quot;phone&quot;&gt;
    &lt;div class=&quot;front&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;back&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;left&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;left-top&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;left-bottom&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;right&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;right-top&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;right-bottom&quot;&gt; &lt;/div&gt;
    &lt;div class=&quot;shadow&quot;&gt; &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

SASS:

<pre><code>.phone-container
  margin: 100px auto
  width: 251px
  height: 537px
  @include perspective(1000px)
  //for elevation on hover:
  $elevation: 40px
  $elevationDuration: 1s
  $elevationTimingFunction: ease-in-out
  @include transition(bottom $elevationDuration $elevationTimingFunction)

  *
    position: absolute
    @include transition(all 1500ms)

  .phone
    left: 125px
    @include transform-style(preserve-3d)
    @include transform(rotateY(-80deg))
    @include animation(rotate-phone 5s linear infinite)

  .front
    width: 251px
    height: 537px
    background: url(/images/phone_parts/front.png) no-repeat
    @include transform(translateX(-125px) rotateY(0deg) translateZ(14px))

  .back
    width: 251px
    height: 537px
    background: url(/images/phone_parts/back.png) no-repeat
    @include transform(translateX(-125px) rotateY(180deg) translateZ(13px))

  .left
    width: 31px
    height: 537px
    background: url(/images/phone_parts/left_side.png) no-repeat
    @include transform(translateX(-138px) rotateY(-90deg))
    @include border-radius(20px)
    @include backface-visibility(hidden)

  .left-top
    background: black
    width: 29px
    height: 30px
    top: 4px
    @include transform(translateX(-129px) rotateY(-90deg) rotateX(30deg))

  .left-bottom
    background: black
    width: 29px
    height: 25px
    @include transform(translateX(-131px) translateY(490px) rotateY(-90deg) rotateX(-30deg))

  .right
    width: 31px
    height: 537px
    background: url(/images/phone_parts/right_side.png) no-repeat
    @include transform(translateX(105px) rotateY(90deg))
    @include backface-visibility(hidden)

  .right-top
    background: black
    width: 29px
    height: 29px
    top: 4px
    @include transform(translateX(98px) rotateY(-90deg) rotateX(-30deg))

  .right-bottom
    background: black
    width: 29px
    height: 25px
    @include transform(translateX(100px) translateY(490px) rotateY(-90deg) rotateX(30deg))

  .shadow
    width: 250px
    height: 20px
    @include transform(translateX(-125px) translateY(530px) rotateX(90deg) translateY(-60px))
    @include box-shadow(0 60px 60px #000)
    @inclue transition(top $elevationDuration $elevationTimingFunction)

  &:hover
    position: relative
    bottom: $elevation

    .shadow
      position: relative
      top: $elevation

@include keyframes(rotate-phone)
  0%
    @include rotateY(0)
  100%
    @include rotateY(360deg)
</code></pre>