Creando un cubo css3

WEB CODE

Ahora vamos a crear un dado o cubo css3, para entenderlo lo primero que tenemos que hacer es crear  una de las caras la cual llamaremos front, esta cara tendrá en Numero 1,  debemos hacerle una rotación a todo el div  con una perspectiva de 1500 y  le damos  una rotación de -40 grados sobre el eje x y 30 sobre el eje Y. quedando en posición.

[codepen_embed height=”377″ theme_id=”22281″ slug_hash=”obOGqb” default_tab=”result” user=”fmorenor”]See the Pen Creando un Cubo con CSS by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]

Después ya te tenemos la cara 1, creamos el cubo, rotando las imágenes sobre su eje X y Y, eso es así de simple.

.front  Sin movimientos

.top     90 grados sobre su eje X

.right   90 grado sobre su eje Y

.left   -90 grados sobre su eje Y

.bottom  -90 grados sobre su eje X

.back   -180 grados sobre su eje Y

Y por último le damos profundidad de 1 em con un  movimiento sobre el eje Z, esto es con Traslate Z( 1em)

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>3D CSS</title>
    <link rel="stylesheet" href="css/normalize.css" />
</head>
	<style>
			.wrapper {
			  width: 50%;
			  float: left;
			  
			}

			.w1 {
			  perspective: 1500px;
			}

			.wrapper h1 {
			  text-align: center;
			}

			.cube {
			  font-size: 4em;
			  width: 2em;
			  margin: 1.5em auto;
			  transform-style: preserve-3d;
			  transform: rotateX(0deg) rotateY(0deg);transition: 1s all linear;

			}
			.cube:hover{
				transform: rotateX(-40deg) rotateY(32deg);
			}

			.side {
			  position: absolute;
			  width: 2em;
			  height: 2em;
			  
			  background: #58AC58;
			  border: 1px solid rgba(0,0,0,.5);


			  
			  color: black; 
			  text-align: center;
			  line-height: 2em;
			}

			.front  { transform:                  translateZ(1em); }
			.top    { transform: rotateX( 90deg)  translateZ(1em); }
			.right  { transform: rotateY( 90deg)  translateZ(1em); }
			.left   { transform: rotateY(-90deg)  translateZ(1em); }
			.bottom { transform: rotateX(-90deg)  translateZ(1em); }
			.back   { transform: rotateY(-180deg) translateZ(1em); }
	</style>
<body>
	<div class="wrapper w1">
  <h1><code>perspective: 1000px</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
	
</body>
</html>


perspective: 1500px

1
6
4
3
5
2

 


ahora si puedes poner el mouse encima del cubo veras como se crea el efecto del dado o el cubo css3. Espero esto sea de utilidad a la hora de hacer nuestro dado para el juego de  Reto Coatl.

Volver arriba