1 #contenedor {2 float: left; 3 }4 5 #caja {6 width: 200px;7 height: 200px;8 background: rgba(255,0,0,0.4);9 color: rgba(0,0,0,0);10 font-size: 12px;11 12 transform: ;13 -webkit-transform: perspective(500px) rotateY(180deg);14 -moz-transform: perspective(500px) rotateY(180deg);15 -o-transform: perspective(500px) rotateY(180deg);16 -ms-transform: perspective(500px) rotateY(180deg);17 transform: perspective(500px) rotateY(180deg);18 19 20 21 /* transiciones */22 transition: all 0.5s ease;23 }24 25 #contenedor:hover #caja {26 background: rgba(0,0,255,0.4);27 transform: rotateX(0deg);28 -webkit-transform: rotateY(0deg);29 -moz-transform: rotateY(0deg);30 -ms-transform: rotateY(0deg);31 -o-transform: rotateY(0deg);32 color: rgba(0,0,0,1); 33 }34 35
Este ShareCode tiene versiones:
- CSS 3D Effect Esto es mi... (24/04/2013)
- CSS 3D Effect Esto es mi... (24/04/2013)
- CSS 3D Effect Esto es mi... (24/04/2013)
- CSS 3D Effect Esto es mi... (24/04/2013)
Enlace
El enlace para compartir es: