Mostrar Mensajes
46
General / Aporte - Cubo tridimensional usando CSS3 y el sistema de coordenadas [jQuery]
« 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.
Espero que les sea de utilidad.
Saludos.
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.
Código: [Seleccionar]
<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.
