Telefono movil CSS 3D

Vamos a ver otro increible ejemplo de diseño con animacion 3D incluida utilizando solamente codigo CSS3. Como podeis observar, se trata de un telefono movil de ultima generacion que no para de girar sobre si mismo en el que, ademas podemos poner una imagen para que aparezca en pantalla de vez en cuando, en este caso he puesto como ejemplo una del logo principal de REDEANDO. Si te ha gustado y quieres insertarlo en tu pagina, copia el codigo que veras abajo. Sustituye la linea de color rojo por la direccion url de la imagen que desees que aparezca en la pantalla del movil.

Nota: Informacion Oculta 

Aqui les dejo el codigo Css para que su cel se mueva:

<div style="perspective: 1500px;padding: 0;margin: 0;background-size: cover;"><div class="telefono movil"><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></div><style>.telefono {  position: relative;  margin: 50px auto;  transform-origin: center;  transform-style: preserve-3d;  animation: 26s rotate ease infinite;}.telefono .front {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  background-position: center center;  background-repeat: no-repeat;  transform: rotateX(0deg) translateZ(10px);}.telefono .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);}.telefono .screen2 {  width: 290px;  height: 520px;  position: absolute;  top: 55px;  left: 14px;  overflow: hidden;  background-repeat: no-repeat;  transform: rotateX(0deg) translateZ(9px);  opacity: 0;  animation: 26s screen ease infinite;  background-color: #000000;  border-radius: 4px;    background-position: center center;  background-image: url(http://urldetuimagen);}.telefono .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);}.telefono .front,.telefono .back {  border-radius: 35px;}.telefono .sides span {  position: absolute;  background: #dddddd;}.telefono .sides .left {  transform: rotateY(90deg) translateZ(-10px) translateY(43px);  left: 0;}.telefono .sides .right {  transform: rotateY(-90deg) translateZ(-10px) translateY(43px);  right: 0;}.telefono .sides .top {  transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-127px) translateX(0px) translateY(149px);  left: 0;  top: 0;}.telefono .sides .bottom {  transform: rotateX(-90deg) rotateZ(-90deg) translateZ(128px) translateX(0px) translateY(149px);  left: 0;  bottom: 0;}.telefono .corners {  width: 100%;  height: 100%;  position: absolute;}.telefono .corners .bottom-left {  position: absolute;  left: 1px;  bottom: 1px;  transform-style: preserve-3d;  transform: rotateY(-90deg) translateX(-10px);}.telefono .corners .bottom-right {  position: absolute;  right: 1px;  bottom: 1px;  transform-style: preserve-3d;  transform: rotateY(90deg) translateX(-10px);}.telefono .corners .top-right {  position: absolute;  right: 1px;  top: 1px;  transform-style: preserve-3d;  transform: rotateY(90deg) rotateX(90deg) translateX(-10px);}.telefono .corners .top-left {  position: absolute;  left: 1px;  top: 1px;  transform-style: preserve-3d;  transform: rotateY(-90deg) rotateX(90deg) translateX(-10px);}.telefono .corners .c {  position: absolute;  width: 20px;  height: 6px;  background-color: #dddddd;}.telefono .corners .c0 {  transform: translateY(-42px) translateZ(0px) rotateX(-3deg);  height: 16px;}.telefono .corners .c1 {  transform: translateY(-30px) translateZ(-1px) rotateX(-8deg);}.telefono .corners .c2 {  transform: translateY(-25px) translateZ(-2px) rotateX(-14deg);}.telefono .corners .c3 {  transform: translateY(-20px) translateZ(-4px) rotateX(-22deg);}.telefono .corners .c4 {  transform: translateY(-15px) translateZ(-7px) rotateX(-36deg);}.telefono .corners .c5 {  transform: translateY(-12px) translateZ(-10px) rotateX(-50deg);}.telefono .corners .c6 {  transform: translateY(-9px) translateZ(-14px) rotateX(-56deg);}.telefono .corners .c7 {  transform: translateY(-6px) translateZ(-19px) rotateX(-67deg);}.telefono .corners .c8 {  transform: translateY(-4px) translateZ(-24px) rotateX(-74deg);}.telefono .corners .c9 {  transform: translateY(-3px) translateZ(-29px) rotateX(-90deg);}.telefono .corners .top-left .c0,.telefono .corners .top-right .c0 {  transform: translateY(-7px) translateZ(-34px) rotateX(-88deg);}.telefono.movil {  width: 319px;  height: 658px;}.telefono.movil .front { border-radius: 35px;}.telefono.movil .sides span {  width: 20px;  height: 573px;}.telefono.movil .sides .top,.telefono.movil .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);  }}.telefono.movil .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");}</style>