<div class="phone htc">

  <span class="back"></span>
  <span class="sides">
    <span class="left"></span>
    <span class="right"></span>
    <span class="top"></span>
    <span class="bottom"></span>
  </span>
  
  <span class="corners">
    <span class="bottom-left">
      <span class="c c0"></span>
      <span class="c c1"></span>
      <span class="c c2"></span>
      <span class="c c3"></span>
      <span class="c c4"></span>
      <span class="c c5"></span>
      <span class="c c6"></span>
      <span class="c c7"></span>
      <span class="c c8"></span>
      <span class="c c9"></span>
    </span>
    <span class="bottom-right">                    
      <span class="c c0"></span>
      <span class="c c1"></span>
      <span class="c c2"></span>
      <span class="c c3"></span>
      <span class="c c4"></span>
      <span class="c c5"></span>
      <span class="c c6"></span>
      <span class="c c7"></span>
      <span class="c c8"></span>
      <span class="c c9"></span>
    </span>
    <span class="top-left">                    
      <span class="c c0"></span>
      <span class="c c1"></span>
      <span class="c c2"></span>
      <span class="c c3"></span>
      <span class="c c4"></span>
      <span class="c c5"></span>
      <span class="c c6"></span>
      <span class="c c7"></span>
      <span class="c c8"></span>
      <span class="c c9"></span>
    </span>
    <span class="top-right">                    
      <span class="c c0"></span>
      <span class="c c1"></span>
      <span class="c c2"></span>
      <span class="c c3"></span>
      <span class="c c4"></span>
      <span class="c c5"></span>
      <span class="c c6"></span>
      <span class="c c7"></span>
      <span class="c c8"></span>
      <span class="c c9"></span>
    </span>
  </span>
  
  <span class="screen"></span>
  <span class="screen2">
  </span>
  <span class="front"></span>
  
</div>
@sidesColor: #ddd;
@bg: #44aaaa;


  html {
    background: @bg;
    perspective: 1500px;
    padding:0; margin: 0;
    
  background: url('http://www.damnwallpapers.com/wp-content/uploads/2013/06/blurred_colors-1920x1080-660x330.jpg');
  background-size: cover;
  
  }

  .phone {
    position: relative; margin: 50px auto;
    transform-origin: center;
    transform-style: preserve-3d;
    animation: 26s rotate ease infinite;
  }

  .phone .front {
  
    width: 100%; height: 100%; 
    position: absolute; top:0; left:0;
    background-position: center center; 
    background-repeat: no-repeat;

    transform: rotateX(0deg) translateZ(10px);

  } 
  
  .phone .screen {

    width: 290px; height: 520px; 
    position: absolute; top:55px; left:14px;
    background-position: center center; 
    background-repeat: no-repeat;
    background-color: #222;

    transform: rotateX(0deg) translateZ(9px);

  } 

  .phone .screen2 {

    width: 290px; height: 520px; 
    position: absolute; top:55px; left:14px; 
    overflow: hidden;
    background-position: center center; 
    background-repeat: no-repeat;
    transform: rotateX(0deg) translateZ(9px); 
    opacity: 0;
  
    animation: 26s screen ease infinite;

    background-color: white; border-radius: 4px;
    background-size: 280px; 
    background-position: center center; 
    background-image: url(http://cdn.redmondpie.com/wp-content/uploads/2011/02/HTC-logo1.png);

  }



  .phone .back {

    width: 100%; height: 100%; 
    position: absolute; top:0; left:0;
    background-position: center center; 
    background-repeat: no-repeat;
    background-color: #eee; 
    box-shadow: inset 0 0 200px rgba(0,0,0,0.1);

    transform: rotateY(180deg) translateZ(10px);

  }

  .phone .front,
  .phone .back { border-radius: 35px; }

  .phone .sides span { 
    position: absolute;
    background: @sidesColor;
  }

  .phone .sides .left {
    transform: rotateY(90deg) translateZ(-10px) translateY(43px);
    left: 0;
  }
  .phone .sides .right {
    transform: rotateY(-90deg) translateZ(-10px) translateY(43px);
    right: 0;
  }
  .phone .sides .top {
    transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-127px) translateX(0px) translateY(149px);
    left: 0; top: 0;
  }
  .phone .sides .bottom {
    transform: rotateX(-90deg) rotateZ(-90deg) translateZ(128px) translateX(0px) translateY(149px);
    left: 0; bottom: 0;
  }


  .phone .corners {
    width: 100%; height: 100%; position: absolute;
  }

  .phone .corners .bottom-left {

    position: absolute; left: 1px; bottom: 1px;
    transform-style: preserve-3d;
    transform: rotateY(-90deg) translateX(-10px);


  }

  .phone .corners .bottom-right {

    position: absolute; right: 1px; bottom: 1px;
    transform-style: preserve-3d;
    transform: rotateY(90deg) translateX(-10px);


  }

  .phone .corners .top-right {

    position: absolute; right: 1px; top: 1px;
    transform-style: preserve-3d;
    transform: rotateY(90deg) rotateX(90deg) translateX(-10px);

  }

  .phone .corners .top-left {

    position: absolute; left: 1px; top: 1px;
    transform-style: preserve-3d;
    transform: rotateY(-90deg) rotateX(90deg) translateX(-10px);

  }

  .phone .corners .c {
    position: absolute;
    width: 20px; height: 6px;
    background-color: @sidesColor;

  }

  .phone .corners .c0 {
    transform: translateY(-42px) translateZ(0px) rotateX(-3deg);
    height: 16px;
  }
  .phone .corners .c1 {
    transform: translateY(-30px) translateZ(-1px) rotateX(-8deg);
  }
  .phone .corners .c2 {
    transform: translateY(-25px) translateZ(-2px) rotateX(-14deg);
  }
  .phone .corners .c3 {
    transform: translateY(-20px) translateZ(-4px) rotateX(-22deg);
  }
  .phone .corners .c4 {
    transform: translateY(-15px) translateZ(-7px) rotateX(-36deg);
  }
  .phone .corners .c5 {
    transform: translateY(-12px) translateZ(-10px) rotateX(-50deg);
  }
  .phone .corners .c6 {
    transform: translateY(-9px) translateZ(-14px) rotateX(-56deg);
  }
  .phone .corners .c7 {
    transform: translateY(-6px) translateZ(-19px) rotateX(-67deg);
  }
  .phone .corners .c8 {
    transform: translateY(-4px) translateZ(-24px) rotateX(-74deg);
  }
  .phone .corners .c9 {
    transform: translateY(-3px) translateZ(-29px) rotateX(-90deg);
  }

  .phone .corners .top-left .c0,
  .phone .corners .top-right .c0 {
    transform: translateY(-7px) translateZ(-34px) rotateX(-88deg);
  }




  .phone.htc {

    width: 319px; height: 658px;

  }

  .phone.htc .front {

    background-image: url('../img/htc/front.png');
    border-radius: 35px;

  }


  .phone.htc .sides span {

    width: 20px; height: 573px;

  }
  .phone.htc .sides .top ,
  .phone.htc .sides .bottom { height: 255px; }










  @keyframes rotate {

    0% { transform:  rotateX(0) rotateY(0) rotateZ(0); }
    10% { transform:  rotateX(0) rotateY(0) rotateZ(0); }

    15% { transform:  rotateX(320deg) rotateY(0deg) rotateZ(10deg); }
    20% { transform:  rotateX(360deg) rotateY(360deg) rotateZ(0deg); }
    25% { transform:  rotateX(320deg) rotateY(320deg) rotateZ(-10deg); }
    30% { transform:  rotateX(360deg) rotateY(0deg) rotateZ(0deg); }

    40% { transform:  rotateX(390deg) rotateY(370deg) rotateZ(-92deg); }
    45% { transform:  rotateX(390deg) rotateY(370deg) rotateZ(-92deg); }

    55% { transform:  rotateX(390deg) rotateY(350deg) rotateZ(-92deg); }
    60% { transform:  rotateX(390deg) rotateY(350deg) rotateZ(-92deg); }

    70% { transform: rotateX(-20deg) rotateY(-26deg); }
    75% { transform: rotateX(-20deg) rotateY(-26deg); }
    
    85% { transform: rotateX(20deg) rotateY(26deg); }
    95% { transform: rotateX(20deg) rotateY(26deg); }


  }

  @keyframes screen {

    0% { opacity:0; }
    32% { opacity:0; } 
    35% { 
      opacity: 1;     
      transform: rotateX(0deg) translateZ(11px);
      box-shadow: 0 0 12px  rgba(255,255,255,0.8);
    }
    99% { opacity: 1; 
      transform: rotateX(0deg) translateZ(11px);
      box-shadow: 0 0 12px  rgba(255,255,255,0.7); 
    }

  }








 .phone.htc .back {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT8AAAKSCAYAAACkzNwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MkU1NTU0QzkwQ0VFMjExOUU3RDgxN0FERTkwRENBNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNjEyMDBFOEYyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNjEyMDBFN0YyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5ODNFNDIxNTlDRkUyMTE4RUNCODU3OURDRjJFNjAyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcyRTU1NTRDOTBDRUUyMTE5RTdEODE3QURFOTBEQ0E1Ii8+IDwvcmRmOkRlc2NyaXB0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 ");
}

.phone.htc .front {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT8AAAKSCAYAAACkzNwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MkU1NTU0QzkwQ0VFMjExOUU3RDgxN0FERTkwRENBNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNjEyMDBFNEYyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNjEyMDBFM0YyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5ODNFNDIxNTlDRkUyMTE4RUNCODU3OURDRjJFNjAyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcyRTU1NTRDOTBDRUUyMTE5RTdEODE3QURFOTBEQ0E1Ii8+IDwvcmRmOkRlc2NyaXB0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H4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgB4mcTAOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB8gfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiB4gfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgB4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4geIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AeIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH6A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiB4ifTQCIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB8gfgDiByB+AOIHIH4A4gcgfgDiB1Av8RsbG2uy+YAK6ZiYmKhM/EZHR//e3d3d4D4AymnLli2xO38/c+ZMZeI3Pj6+9uTJk0+7K4Aye3pyr2/tiRMnSvomma6urqL3HbPZbFi5cuUrixYt6pnU5z4BLuAe39/ih8nwPdXf3x9OnTpVufgl3yCTCW1tbaGlpSU0Nja6h4ALYvJoMwwPD4ehoaEwMjJS8vfLlfoN4tBxcHAw+QVQK1zqAogfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+FWxXC4XOjo6bAhqUny+/YMPPph8pMDj2yYo7JprrgkbN25MfnBeeumlcPjwYRuFmrFixYqwadOm0NraGq6//vrw5ptvhiNHjtgw9vxmF1+l5s477wxPPvlkEr6jR4+GY8eO2TDUjFWrViU/vzF88ZVQ4se4jl/nTw2dnZ3P2Qz/s3jx4vDYY4+FW265JYngnj17wttvvx1ftdrGoSbcfPPN4dFHHw1NTU1h37594dVXXw3Lly9Pxjdr1qwJ8QVA7QGK3zRXX3112Lx5c3xx1iR2H374Yejt7Y3vVWLjUBPWrVsX7rvvvuRFhvv6+sI777yTvP7dDz/8EC655JJwxRVXhBtuuCG57U8//ZT67ZX6mV/cw7vtttvChg0bkh+agYGB5IcmvlIs1JK77ror+fjVV1+Fzz//POTf4Cf+B/7BBx8ke31xpBNv9+WXX6Z+e6V+5rd69epw9913J+E7ffp02LZtm/BR077++utw7jubxfWuXbtsHPH7UzwkiIe38YdjyZIl4fHHHw+XXnqpnwwQv/oXDwFef/31ZM8vzvy6u7vDddddZ8OA+NW/vXv3hp6ennDw4MHQ3NycXCMV54BxJgiIX107fvx42L59e/jmm2+SdRwOxzPA8ZkeQH3xqD5HPDO2c+fOcODAgfDwww+Hzs7O5DqpQ4cO2TjUhGeffdZGEL/i/fjjj2H//v3JtVEuCoX6U/KblgPUIjM/QPwAxA9A/ADED0D8AMQPQPwAxA9A/ADED0D8AMQPQPwAxA9A/ADmL7d+/XpbAUidzODgoFdyBsQPQPwAxA9A/ADED0D8AMQPQPwAxA+gkjy3d9L4+Li1dWrX4pdSvb29YceOHdbWqVynWcPWrVufS/MGWLp0aWhubg7t7e3W1qlbm/kBOOw187O2NvMTPzM/a2szPzM/Mz9razM/Mz8Ah71mftbWZn7iZ+ZnbW3mVxMzv+cnP6Z27mcGZG3ml86RX5z5xU/M/YBUxc/Mz8zH2swv1TO/jJmftbWZX1r2+vIzv/wXUjn3MwOyNvNLneeTAv5/5mfuB6Rqz29q/AQQSEX4xA8QPwEE0hI+8QPETwCBtITvfPETQKBuwyd+gPgJIJCW8M0lfgII1F345ho/AQTqKnzziZ8IAnURvWLjJ4BAzYev2PiJIFCz0VuI+IkgUHPRW8j4CSFQE8G7kPETQqBqgzfVfwUYAKoHpJTPsvocAAAAAElFTkSuQmCC");
  }
View Compiled
/*

Was playing around with 3D CSS Transforms today and made this.
Something I think that sets this apart is the rounded-box corners.

I effectively created 4 identical corners and rotated them about a couple of axis to get them in each corner.

It is not easy, though, and there are a few tiny gaps/holes.

I hope/wish there is a way to create rounded-box-corners with a javascript-generator or somethin in the futureg.

Maybe a project for me...

Enjoy.

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js