top of page
Buscar

Creando un cubo css3

  • Foto del escritor: Francisco Moreno Rodríguez
    Francisco Moreno Rodríguez
  • 3 feb 2015
  • 2 Min. de lectura

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.

 
 
 

コメント

bottom of page