Comunidad PHPeros
Lenguajes => General => Mensaje iniciado por: SoyJoaquin. en 07 de Junio de 2012, 00:30:40 am
-
Hola PHPeros.
Basándome en un código abierto de CSS3 para la creación del cubo e integrandole el sistema de coordenadas que cree ya hace varias semanas, he conseguido hacer algo realmente atractivo para lo que llega siendo el mundo tridimensional.
Su funcionamiento es sencillo, puedes mover el cubo para cambiar de vista con solo mantener presionado click y arrastrarlo para ir viendo todos sus ángulos.
<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;
}
.perspectiva {
-webkit-perspective: 400;
-webkit-perspective-origin: 50% 50%;
}
#cubo {
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
position: relative;
margin: 200px auto;
}
.lados {
height: 200px;
width: 200px;
background-color: rgba(50, 50, 50, .7);
border: 1px solid #666;
position: absolute;
}
#cubo .uno { -webkit-transform: rotateX(90deg) translateZ(100px) }
#cubo .dos { -webkit-transform: translateZ(100px) }
#cubo .tres { -webkit-transform: rotateY(90deg) translateZ(100px) }
#cubo .cuatro { -webkit-transform: rotateY(180deg) translateZ(100px) }
#cubo .cinco { -webkit-transform: rotateY(-90deg) translateZ(100px) }
#cubo .seis { -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px) }
.lados:hover { background-color: rgba(100, 100, 100, .5) }
</style>
<script>
$(document).ready(function(){
var estaX = 0; var estaY = 0; var x; var y; var press; var pX; var pY;
$('body').mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false; estaX = x; estaY = y;
}).mousemove(function(b){
if(press){
x = Math.round(-(b.pageY-pY)+estaX);
y = Math.round((b.pageX-pX)+estaY);
$('#cubo').css('WebkitTransform', 'rotateX('+x+'deg) rotateY('+y+'deg)');
}
});
});
</script>
</head>
<body>
<div class="perspectiva">
<div id="cubo">
<div class="lados uno"></div>
<div class="lados dos"></div>
<div class="lados tres"></div>
<div class="lados cuatro"></div>
<div class="lados cinco"></div>
<div class="lados seis"></div>
</div>
</div>
</body>
</html>
Espero que les sea de utilidad.
Saludos.
-
Qué curioso, nunca había visto algo parecido.. me ha gustado jajaja, buen aporte.
+K
-
Geniaal! me gusto mucho esto.
k+
-
Muchas gracias.
@ilovepixel, Voy a ver si puedo sacar un motor de baldosas usando como base esto, seria interesante un MMOCC tridimensional sin la utilización de plugins.
Saludos.
Edito: Acabo de finalizar una v4 (o 5, ya ni recuerdo) del build de baldosas, esta vez usando como base este aporte para el soporte tridimensional.