CSS3 Cube, algo interesante para manipular un cubo en 3D

DESCARGA : CSS3 Cube

CSS3 Cube, algo interesante para manipular un cubo en 3D, este es un plugin muy interesante, no por el resultado si no por la capacidad que se tiene para manipular código css3 y que mezclado con jquery y un poco de javascript se puede lograr un efecto 3D sin la necesidad de implementar ninguna librería que trabaje con webgl o elementos del procesador de gráficos.

Además que puedes configurar el modelado para que reaccione cuando el puntero se pase encima de dicha imagen y lograr una animación, lo que necesitas para tener esta impactante imagen 3D, prácticamente es el plugin, una textura y un poco de documentación.

El plugin permite generar imágenes 3D para tener animaciones con determinados ángulos o sentidos, además puedes controlar el cambio de caras para dar un toque más realista a tú modelo en forma de cubo.

Tiene :

1.-Control de tiempo.
2.- Control de velocidad de giro.
3.- Control de giro en los ejes X,Y,Z.
4.- Sentido de rotación.
5.- Control de movimiento.
6.- Control de foco.

Solo necesitas etiquetas html

<div id="the-cube" class="the-cube">
<span class="side-1"></span>
<span class="side-2"></span>
<span class="side-3"></span>
<span class="side-4"></span>
<span class="side-5"></span>
<span class="side-6"></span>
</div>

Agregar los siguientes estilos

.the-cube {
margin: 80px auto;
}

.the-cube > span {
background-image: url(../images/cube/cube-texture.jpg);
}

Integrar el plugin javascript que esta en el siguiente enlace: http://xhtmlized.github.io/cube/cube.js

posteriormente hacer referencia al id que contiene las imágenes de las caras del cubo.

Agregando el código javascript de la siguiente forma:

var myCube = new Cube('#the-cube');

myCube.rotate({
speedX: 10000,
speedY: 10000,
speedZ: 10000,
startSide: 'side-1'
});

Puedes ver ejemplos en la siguiente dirección url:http://xhtmlized.github.io/cube/#documentation

Ahí puedes encontrar código muy interesante para su implementación, también tienen el enlace a github: https://github.com/xhtmlized/cube

 

 

 

You may also like...