Proyecciones isométricas en CSS3

Hace algún tiempo atrás abordamos el tema de las proyecciones isométricas y los cálculos matemáticos usados para transformar cada uno de los planos que las componían. En el presente tutorial veremos cómo crear proyecciones isométricas usando para ello solamente HTML y transformaciones CSS3.

Para seguir el presente tutorial es recomendable la lectura de los cálculos matemáticos necesarios para lograr una proyección isométrica así como las transformaciones disponibles en CSS3. Los dos tutoriales anteriores son esenciales para entender el texto que sigue a continuación. Si ya conoces estos temas puedes continuar con la lectura.

Estructura HTML

A continuación mostramos la estructura que tendrá el HTML con el que vamos a trabajar. El alzado corresponde al div con la clase plano-a, el perfil derecho corresponde al div con la clase plano-pd y la planta corresponde al div con la clase plano-pl:

<div class="plano-a"></div>
<div class="plano-pd"></div>
<div class="plano-pl"></div>

Estructura CSS

Para crear la proyección isométrica usaremos planos de 100 pixeles de ancho por 100 pixeles de alto. Mediante posiciones absolutas los situaremos a todos en el mismo sitio y aplicaremos las transformaciones usando como punto de origen la esquina superior isquierda de cada uno de ellos.

.plano-a,
.plano-pd,
.plano-pl {
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: top left;
  width: 100px;
}

.plano-a{
  background-color: #ffcdcd;
}

.plano-pd{
  background-color: #cdffcd;
}

.plano-pl{
  background-color: #cdcdff;
}

Creación del alzado (A)

Recordemos que para crear el alzado debemos sesgar el plano 30º en la vertical y reducirlo al 86,6025% de su ancho. Procederemos a crear estas dos transformaciones:

PASOS	TRANSFORMACIONES
paso 1	skewY(30deg)
paso 2	skewY(30deg) scaleX(.866025)

.plano-a {
  background-color: #ffcdcd;
  transform: skewY(30deg) scaleX(.866025);
}

Creación del perfil derecho (PD)

Para lograr el perfil derecho hay que realizar las mismas transformaciones anteriores con la diferencia que el sesgado debe realizarse en -30º en la vertical.

PASOS	TRANSFORMACIONES
paso 1	skewY(-30deg)
paso 2	skewY(-30deg) scaleX(.866025)

.plano-pd {
  background-color: #cdffcd;
  transform: skewY(-30deg) scaleX(.866025);
}

Creación de la planta (PL)

En este caso las transformaciones no serán las mimas que realizamos en el tutorial de Illustrator aunque el resultado será el mismo. En primer lugar rotaremos el elemento en -60º, después lo sesgaremos en 30º y por último lo reduciremos al 86,6025% de su ancho.

PASOS	TRANSFORMACIONES
paso 1	rotate(-60deg)
paso 2	rotate(-60deg) skewY(30deg)
paso 3	rotate(-60deg) skewY(30deg) scaleX(.866025)

.plano-pl {
  background-color: #cdcdff;
  transform: rotate(-60deg) skewY(30deg) scaleX(.866025);
}

Colocar los planos

Ya contamos con todos los planos transformados pero no están colocados en su sitio. El resultado de nuestro trabajo hasta este momento es el siguiente:

Recordemos que en la representación isométrica de un cubo todos los lados tienen la misma longitud. Como el tamaño de los planos es de 100 por 100 pixeles, ésta será la longitud de todos los segmentos.

La línea discontínua representa el punto de inicio de todas las transformaciones. Debemos intentar situar los planos de manera que la esquina superior izquierda de toda la figura quede situada en dicho punto. Para lograrlo debemos trasladar el alzado y la planta 50 pixeles hacia abajo y el perfil derecho 100 pixeles hacia abajo y 86.6025 pixeles hacia la derecha. Este sería el CSS final de todos los elementos:

.plano-a {
  background-color: #ffcdcd;
  transform: translateY(50px) skewY(30deg) scaleX(.866025);
}

.plano-pd {
  background-color: #cdffcd;
  transform: translate(86.6025px, 100px) skewY(-30deg) scaleX(.866025);
}

.plano-pl {
  background-color: #cdcdff;
  transform: translateY(50px) rotate(-60deg) skewY(30deg) scaleX(.866025);
}

Y este sería el resultado del HTML:

Descarga los ficheros de ejemplo del cubo isométrico en CSS3.

Ejemplo práctico

Usando esta técnica podemos crear proyecciones isométricas más complejas. A continuación podemos ver la misma proyección que se utilizó en el tutorial de Illustrator pero usando en este caso HTML y transformaciones CSS3:

Descarga los ficheros de ejemplo de la proyección isométrica en CSS3.

Y hasta aquí el tutorial de crear proyecciones isométricas en CSS3. Espero que les sea de utilidad.