Telefono movil CSS3 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.

Y este es el resultado... ¿como te quedas?

ver codigo del telefono

<div style="perspective: 1500px;padding: 0;margin: 0;background-size: cover;">
<div class="telefono movil">


 
 
 
 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 





</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>