Hola PHPeros.
En esta oportunidad les traigo una nueva versión del
Build de Baldosas que vengo desarrollando desde el año pasado.
Como ya sabrán, en su
v4.0 se agrego un novedoso soporte tridimensional para poder observar todos los ángulos posibles de nuestra retícula. Pero, aun así, la vista 3D no se llega a observar con facilidad ya que no cuenta con planos verticales que nos ayude a distinguir mejor la diferencia.
Lo nuevo que les ofrece esta versión (v5.0) es que muetra el grosor que llega a tener cada baldosa en vista.
<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);
}
.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, .8) }
.grosor {
width:64px;
height:30px;
background-color: rgba(50, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position:absolute;
border:1px solid #555;
}
.uno { -webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(48px) translateY(15px) }
.dos { -webkit-transform: rotateX(-90deg) rotateY(90deg) translateZ(32px) translateY(15px) translateX(-16px)}
.tres { -webkit-transform: rotateX(-90deg) rotateY(180deg) translateZ(16px) translateY(15px) }
.cuatro { -webkit-transform: rotateX(-90deg) rotateY(270deg) translateZ(32px) translateY(15px) translateX(16px)}
</style>
<script>
/*!
* Build de Baldosas 3D v5.0 - 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 class="grosor uno"></div><div class="grosor dos"></div><div class="grosor tres"></div><div class="grosor cuatro"></div></div>');
resultadoX = (x * (balW));
resultadoY = (y * (balH));
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});
}
}
}
</script>
</head>
<body>
<div id="piso"></div>
</body>
</html>
Nota: Quizás se les ejecute un poco lento ya que he querido mostrar todos los lados de la baldosa en si para que vean lo que he querido decir con el tema de lo tridimensional, mas adelante montare una actualización de esta versión la cual solo mostrara el borde correspondiente sin sobrecargar la pagina de elementos.
Saludos.
