¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Programación Aporte - Cubo tridimensional...
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>
		<meta name="author" content="Joaquin A." />
		<meta name="twitter" content="JoakoM010" />
		<script src="http://code.jquery.com/jquery-1.9.1.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.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Me queda así :/?  y no hace nada más

Para seguirme solamente tienes que darle al corazón
@maoellisto

Me queda así :/?  y no hace nada más




Te queda así por que no lo ejecutas con algún navegador que use webkit. Ejemplo: Safari o Google Chome.

Este es solo un ejemplo para el que quiera desarrollarlo, esta mas que claro que si lo quieres llevar a otras expresiones necesitaras hacerlo compatible con los demás navegadores (En mi caso, lo hice así de rápido ya que solo me interesaba mostrarles el resultado de lo que se hace).


#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) }


Puedes añadirlo con "moz" (Para Firefox) u otros paramentos de soporte a otros navegadores como "o" (Opera), "ms", etc.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Google Chrome :'( me rindo, gracias de todas formas

Para seguirme solamente tienes que darle al corazón
Haces cosas espectaculares jajaja, le echas mucho tiempo al CSS y al CSS3, creo que es una de las cosas que más te gustan no?
Español. Exmiembro del DDI y los ya desaparecidos departamentos de Relaciones públicas y de Artículos. Programador y escritor principiante.
@iEnrique

Haces cosas espectaculares jajaja, le echas mucho tiempo al CSS y al CSS3, creo que es una de las cosas que más te gustan no?


Sí, aunque de primero esta Javascript.
Se pueden hacer muchas cosas espectaculares, cosas que podrían hacernos cambiar nuestros estandar.

Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Perdonen pero tuve que editar el tema ya que me he percatado que en el viejo hogar de mis aportes (Comunidad PHPeros), me retiro el signo "+" de todos mis códigos haciendo que por lógica, dejaran de funcionar.

Acabo de editar ya este tema con el código reparado.
Un saludo.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Aaaaaaaaaahh!! es hermoso, ya lo conseguí

Para seguirme solamente tienes que darle al corazón
Programación Aporte - Cubo tridimensional...