Experimentando un poquillo con CSS3, me ha salido un interactivo efecto activable, creando asi la ilusion de movimiento vertical de un plano en el espacio 3D. Si lo que os acabo de contar os suena a conchinchino, basta con que veais el ejemplo de demostracion. De momento, aunque se ve en Firefox, esta animacion se aprecia mejor en Chrome y Opera.
Pasa el cursor por encima para ver el efecto.
ver el codigo utilizado
<div id="contenedorp">
<div class="objeto"><div class="hoverplano3d">1</div>
<div class="sombra"></div></div>
<div class="objeto"><div class="hoverplano3d">2</div>
<div class="sombra"></div></div>
<div class="objeto"><div class="hoverplano3d">3</div>
<div class="sombra"></div></div>
</div>
<style>
#contenedorp{
height: 300px;
width: 630px;
margin: 30px auto;
-webkit-perspective: 600;
-webkit-perspective-origin: 50% 50%;
-moz-perspective: 600;
-moz-perspective-origin: 50% 50%;position: relative;
}
.objeto{
padding: 0 50px;
float: left;
width: 100px;
height: 300px;cursor:pointer;
}
.hoverplano3d{
-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
position: absolute;
top: 0;
z-index: 2;
width: 100px;
height: 100px;
border: solid 5px #F90;
text-align: center;
color: #fff;
line-height: 100px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 50pt;
-webkit-transform: rotateX(-75deg);
-webkit-transition: all .75s ease-out;
-moz-transform: rotateX(-75deg);
-moz-transition: all .75s ease-out;
background: #b3dced;
background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee));
background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -o-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -ms-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: linear-gradient(135deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 );
}
.objeto:hover .hoverplano3d{
top: 150px;
-webkit-transform: rotateX(-100deg);
-moz-transform: rotateX(-100deg);
}
.sombra{
position: absolute;
top: 150px;
z-index: 1;
width: 110px;
height: 110px;
background-color: rgba(0,0,0,0.2);
-webkit-transform: rotateX(-100deg);
-webkit-transition: all .75s ease-out;
-webkit-box-shadow: 0 0 40px rgba(0,0,0,0.2);
-moz-transform: rotateX(-100deg);
-moz-transition: all .75s ease-out;
-moz-box-shadow: 0 0 40px rgba(0,0,0,0.2);
-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.objeto:hover .sombra{
background-color: rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.8);
}
</style>
