Francisco Aureliano

Creando un cubo css3

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 al blog