Hola PHPeros.
Últimamente podrán haber notado que me he infiltrado en lo que es el tema de la tridimensionalidad en paginas web usando CSS3 como su principal punto de apoyo.
Esta vez (como lo mencione en otro aporte que publique hace unos minutos), les traigo una nueva versión del Build de baldosas que ya conocieron antes en mis otros temas, pero esta vez con el toque tridimensional que lo hace especial.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body {
background-Color:#111;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#piso {
height: 640px;
width: 640px;
-webkit-transform-style: preserve-3d;
position: relative;
margin: 0 auto;
-webkit-transform: rotateX(60deg) rotateZ(45deg);
box-shadow:0 0 50px #000;
}
.baldosa {
width:64px;
height:64px;
background-color: rgba(50, 50, 50, .7);
position: absolute;
border:1px solid #555;
}
.baldosa:hover { background-color: rgba(100, 100, 100, .5) }
</style>
<script>
/*!
* Build de Baldosas 3D - jQuery
*
* Autor: Joaquin A. (SoyJoaquin. o -Null-)
* http://phperos.net
*
* Contacto:
* Email: hgcproductions@hotmail.com
* Skype: SoyJoaquin.
*
*/
var emX;
var emY;
var balH;
var balW;
$(document).ready(function (){
emX = 150;
emY = 0;
balH = 64;
balW = 64;
loadBaldosa();
var estaX = 45; var x; var press; var pX;
$('body').mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false; estaX = x;
}).mousemove(function(b){
if(press){
x = Math.round(-(b.pageX-pX)+estaX);
$('#piso').css('WebkitTransform', 'rotateX(60deg) rotateZ('+x+'deg)');
}
});
});
function loadBaldosa() {
var id = 0;
for(x=0;x<10;x++) {
for(y=0;y<10;y++) {
id++;
$("#piso").append('<div id="'+id+'" class="baldosa"></div>');
resultadoX = (x * (balW));
resultadoY = (y * (balH));
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});
}
}
}
</script>
</head>
<body>
<div id="piso"></div>
</body>
</html>
Espero que les sea de utilidad.
Saludos.
