<div class='text'>
  <span style='color:red;'>Please view on full screen</span>
  <h1>WebDock demo</h1>
  A fun dock for links.<br /><br /><br />
  Hover mouse pointer at the bottom to reveal the dock.
</div>

<main id='dock'>
<div class='dock'>
  <ul>
    <li><a href='#'>A</a><span class='label'>Home</span></li>
    <li><a href='#'>B</a><span class='label'>Link1</span></li>
    <li><a href='#'>C</a><span class='label'>Link2</span></li>
    <li><a href='#'>D</a><span class='label'>Link3</span></li>
    <li><a href='#'>E</a><span class='label'>Link4</span></li>
  </ul>
  <div class='back-dock'>
    <ul>
      <li><a>A</a></li>
      <li><a>B</a></li>
      <li><a>C</a></li>
      <li><a>D</a></li>
      <li><a>E</a></li>
    </ul>
  </div>
</div>
</main>

@mixin transition($in) {
  transition:$in;
  -webkit-transition:$in;
  -moz-transition:$in;
  -o-transition:$in;
  -ms-transition:$in;
}
@mixin transform($in) {
  transform:$in;
  -webkit-transform:$in;
  -moz-transform:$in;
  -o-transform:$in;
  -ms-transform:$in;
}
@mixin transform-style($in) {
  transform-style:$in;
  -webkit-transform-style:$in;
  -moz-transform-style:$in;
  -o-transform-style:$in;
  -ms-transform-style:$in;
}
@mixin perspective($in) {
  perspective:$in;
  -webkit-perspective:$in;
  -moz-perspective:$in;
  -o-perspective:$in;
  -ms-perspective:$in;
}
@mixin perspective-origin($in) {
  perspective-origin:$in;
  -webkit-perspective-origin:$in;
  -moz-perspective-origin:$in;
  -o-perspective-origin:$in;
  -ms-perspective-origin:$in;
}
body {
  margin:0;
  padding:0;
  background:#ddd;
}
* {
  color:#888;
  font-family:Helvetica,sans-serif;
  font-weight:bold;
}
.text {
  margin:60px auto;
  text-align:center;
  width:60%;
  padding:5% 5% 10% 5%;
  background:#fff;
  border-radius:5px;
}
#dock {
  position:fixed;
  bottom:0;
  width:100%;
  min-height:30px;

  .dock {
    margin:0 auto -17px;
    @include transform-style(preserve-3d);
    @include transform(translateY(100px));
    @include perspective(5000px);
    @include perspective-origin(50% 0);
    @include transition(all 0.4s ease);
    text-align:center;

    ul {
      list-style-type:none;
      padding:0;
      z-index:100;
      margin-bottom:-119px;
      @include transform(translateZ(100px));

      li {
        display:inline-block;

        a {
          border:none;
          outline:none;
          display:inline-block;
          background:#fff;
          border:2px solid #aaa;
          width:50px;
          height:50px;
          border-radius:50%;
          vertical-align:center;
          text-decoration:none;
          @include transition(all 0.4s ease);
          text-align:center;
          line-height:50px;
          font-size:40px;

          &:hover~.label {
            opacity:1;
            top:-20px;
          }
        }

        span.label {
          position:absolute;
          top:-5px;
          margin-left:-50px;
          opacity:0;
          @include transition(all 0.2s ease);
        }
      }
    }

    .back-dock {
      width:400px;
      margin:0 auto -80px;
      z-index:-1;
      height:200px;
      background:#333;
      @include transform(rotateX(260deg));
      border-radius:10px;


      ul {
        text-align:center;
        opacity:0.2;
        -webkit-filter:blur(3px);
        @include transform(scale(1.01,2));

        a {
          cursor:default;
        }
      }
    }
  }

  &:hover>.dock {
    @include transform(translateY(0px));
  }
}