ANDY ANDROID CSS3

dabblet.css

/**
 * ANDY ANDROID CSS3
 */

.android.normal {
    position: relative;
    top: 0;
    left: 20%;
    width: 264px;
    height: 336px;
}

.android .body {
    position: absolute;
    top: 110px;
    left: 48px;
    width: 168px;
    height: 152px;
    border-radius: 0 0 30px 30px;
    background-color: #A4C639;
}
.android .head {
    position: absolute;
    top: 30px;
    left: 48px;
    width: 168px;
    height: 68px;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    background-color: #A4C639;
}
.android .eyes-overflow-wrapper {
    position: absolute;
    top: 25px;
    left: 8px;
    width: 152px;
    height: 20px;
    overflow: hidden;
}
.android .eyes {
    position: absolute;
    width: 152px;
    height: 20px;
    -transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

.android .eye {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: white;
    -transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.android .eye.left {
    left: 30px;
}
.android .eye.right {
    right: 30px;
}
.android .antenna {
    position: absolute;
    top: 8px;
    width: 6px;
    height: 32px;
    background-color: #A4C639;
    border-radius: 15px 15px 0 0;
    -transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}
.android.normal .antenna {
    width: 8px;
}
.android .antenna.left {
    left: 104px;
	-transform: translate3d(0,0,0) rotateZ(-32deg);
    -moz-transform: translate3d(0,0,0) rotateZ(-32deg);
    -webkit-transform: translate3d(0,0,0) rotateZ(-32deg);
}

.android .antenna.right {
    right: 104px;
    -transform: translate3d(0,0,0) rotateZ(32deg);
    -moz-transform: translate3d(0,0,0) rotateZ(32deg);
    -webkit-transform: translate3d(0,0,0) rotateZ(32deg);
}

.android .arm-wrapper {
    position: absolute;
    top: 110px;
    width: 36px;
    height: 114px;
    -transform-origin: 50% 16%;
    -transform-style: preserve-3d;
    -transform: translate3d(0,0,0) rotateY(0deg);
    -moz-transform-origin: 50% 16%;
    -moz-transform-style: preserve-3d;
    -moz-transform: translate3d(0,0,0) rotateY(0deg);
    -webkit-transform-origin: 50% 16%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0) rotateY(0deg);
}
.android .arm-wrapper.left {
    left: 0;
}

.android .arm-wrapper.right {
    left: 228px;
}

.android .arm {
    position: absolute;
    width: 36px;
    height: 114px;
    border-radius: 18px;
    background-color: #A4C639;
	-transform-origin: 50% 16%;
	-transform: translate3d(0,0,0) rotateY(0deg);
    -moz-transform-origin: 50% 16%;
    -moz-transform: translate3d(0,0,0) rotateY(0deg);
    -webkit-transform-origin: 50% 16%;
    -webkit-transform: translate3d(0,0,0) rotateY(0deg);
}

.android .leg-wrapper {
    position: absolute;
    top: 250px;
    width: 36px;
    height: 72px;
    -transform-style: preserve-3d;
    -transform: translate3d(0,0,0) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: translate3d(0,0,0) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0) rotateY(0deg);
}
.android .leg-wrapper.left {
    left: 86px;
}
.android .leg-wrapper.right {
    right: 86px;
}

.android .leg {
    position: absolute;
    width: 36px;
    height: 72px;
    border-radius: 0 0 18px 18px;
    background-color: #A4C639;
    -transform: translate3d(0,0,0);
    -transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

dabblet.html

<div class="android normal">
   <div class="antenna left"></div><div class="antenna right"></div>
   <div class="head">
       <div class="eyes-overflow-wrapper">
           <div class="eyes">
               <div class="eye left"></div><div class="eye right"></div>
           </div>
      </div>
</div>
   <div class="body-container">       
     <div class="arm-wrapper left">
         <div class="arm left"></div>
     </div>
     <div class="arm-wrapper right">
         <div class="arm right"></div>
     </div>
     <div class="leg-wrapper left">
         <div class="leg left"></div>
     </div>
     <div class="leg-wrapper right">
         <div class="leg right"></div>
     </div>
 </div>
 <div class="body"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}