Crea un cubo de imagenes

comentar

Para hacer el titulo de una cabecera, para decorar o para lo que tu quieras. Este cubo con efecto 3D hecho exclusivamente con imagenes y CSS, seguro que te gusta.
Aqui tienes un ejemplo de como queda, hecho con imagenes de mis banners:



Para ponerlo en tu blog o web, primero añades los estilos CSS en la plantilla (en Blogger lo puedes poner antes de ]]></b:skin> quitando las etiquetas <style> de principio y final) y guardas.


<style>
 #contenedorcubo{width: 250px;height: 250px;position: relative;float:center;}     
     .cube {
position:relative;
top: 0px;
left: 0px;
}
.face {
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;
font-family: monospace;
font-size: 24px;
}
.top {
top: 0;
left: 89px;
background: #ffffff;
color: #ffffff;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
top: 77px;
left: 44px;
background: #ffffff;
color: #ffffff;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.demoright {
top: 77px;
left: 133px;
background: #ffffff;
color: #ffffff;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}
</style>



Una vez hecho esto, alli donde quieras mostrarlo pones el siguiente codigo. Selecciona las imagenes que vas a poner y añades las urls donde esta indicado en rojo:


<div id="contenedorcubo"><div class="cube"><div class="face top"><img height="100" src="URL IMAGEN" width="100" /></div><div class="face left"><img height="100" src="URL IMAGEN" width="100" /></div><div class="face demoright"><img height="100" src="URL IMAGEN" width="100" /></div></div></div>