¿Cómo puedo crear un cubo con CSS? Mi intención es entender el funcionamiento del CSS en su aplicación a estructuras 3D.
2 respuestas
Cubo es un poliedro limitado por seis caras cuadradas congruentes.
Para empezar, limitaremos el cubo por un elemento base: la escena. Posteriormente, crearemos seis elementos dentro del cubo, que definirán cada cara del cubo en sí.
Podríamos definir el elemento base como espacio disponible.
<div class="scene">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="down"></div>
</div>
</div>
Definimos estilos básicos para .space
, .cube
y todas las caras de este.
.space {
height: 10em;
width: 10em
}
.cube {
height: 100%;
position: relative;
transform-style: preserve-3d;
width: 100%
}
.cube > * {
height: 100%;
position: absolute;
width: 100%
}
A excepción de propiedades añadidas de estilo adicionales para mejora visual, el resultado sería exactamente así:
.scene {
height: 10em;
width: 10em;
perspective: 30em;
}
.cube {
height: 100%;
position: relative;
transform-style: preserve-3d;
width: 100%;
}
.cube > * {
border: .25em solid #000;
height: 100%;
position: absolute;
width: 100%
}
.front { background-color: #ff3b30cd }
.back { background-color: #4cd964cd }
.left { background-color: #007affcd }
.right { background-color: #5856d6cd }
.top { background-color: #ffcc00cd }
.down { background-color: #ff9500cd }
<div class="scene">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="down">down</div>
</div>
</div>
A continuación, rotaremos cada elemento sobre su eje cartesiano concreto. front
y back
son las únicas caras visibles, las demás son perpendiculares al observador.
.scene {
height: 10em;
width: 10em;
perspective: 30em;
}
.cube {
height: 100%;
position: relative;
transform-style: preserve-3d;
width: 100%;
}
.cube > * {
border: .25em solid #000;
height: 100%;
position: absolute;
width: 100%
}
.front {
background-color: #ff3b30cd;
transform: rotateY(0deg) translateZ(5em)
}
.back {
background-color: #4cd964cd;
transform: rotateY(180deg) translateZ(5em)
}
.left {
background-color: #007affcd;
transform: rotateY(-90deg) translateZ(5em)
}
.right {
background-color: #5856d6cd;
transform: rotateY(90deg) translateZ(5em)
}
.top {
background-color: #ffcc00cd;
transform: rotateX(90deg) translateZ(5em)
}
.down {
background-color: #ff9500cd;
transform: rotateX(-90deg) translateZ(5em)
}
<div class="scene">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="down">down</div>
</div>
</div>
Finalmente, con unas líneas más de código y Javascript, podemos rotar el cubo.
var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.group');
var currentClass = '';
function changeSide() {
var checkedRadio = radioGroup.querySelector(':checked');
var showClass = 'move-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
}
// set initial side
changeSide();
radioGroup.addEventListener( 'change', changeSide );
.scene {
color: #fff;
font-family: monospace;
font-size: 2em;
height: 10em;
width: 10em;
perspective: 30em;
}
.cube {
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
width: 100%;
}
.cube > * {
display: flex;
justify-content: center;
align-items: center;
border: .25em solid #000;
height: 100%;
position: absolute;
width: 100%
}
.front {
background-color: #ff3b30cd;
transform: rotateY(0deg) translateZ(5em)
}
.back {
background-color: #4cd964cd;
transform: rotateY(180deg) translateZ(5em)
}
.left {
background-color: #007affcd;
transform: rotateY(-90deg) translateZ(5em)
}
.right {
background-color: #5856d6cd;
transform: rotateY(90deg) translateZ(5em)
}
.top {
background-color: #ffcc00cd;
transform: rotateX(90deg) translateZ(5em)
}
.down {
background-color: #ff9500cd;
transform: rotateX(-90deg) translateZ(5em)
}
.move-front { transform: translateZ(-10em) rotateY(0deg); }
.move-right { transform: translateZ(-10em) rotateY(-90deg); }
.move-back { transform: translateZ(-10em) rotateY(-180deg); }
.move-left { transform: translateZ(-10em) rotateY(90deg); }
.move-top { transform: translateZ(-10em) rotateX(-90deg); }
.move-bottom { transform: translateZ(-10em) rotateX(90deg); }
<div class="scene">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="down">down</div>
</div>
</div>
<p class="group">
<label>
<input type="radio" name="rotate-cube-side" value="front" checked /> front
</label>
<label>
<input type="radio" name="rotate-cube-side" value="right" /> right
</label>
<label>
<input type="radio" name="rotate-cube-side" value="back" /> back
</label>
<label>
<input type="radio" name="rotate-cube-side" value="left" /> left
</label>
<label>
<input type="radio" name="rotate-cube-side" value="top" /> top
</label>
<label>
<input type="radio" name="rotate-cube-side" value="bottom" /> bottom
</label>
</p>
Un cubo en css requieren propiedades especificas para poder funcionar como tal, como sabrás con css se nos permite a base de formas 2d crear una estructura 3d (Como lo es un cubo)
<div id='spaceOne' class="espacio3D">
<div id="cubeOne" class="cubo3D">
<aside class="cara cara1">01</aside>
<aside class="cara cara2">02</aside>
<aside class="cara cara3">03</aside>
<aside class="cara cara4">04</aside>
<aside class="cara cara5"></aside>
<aside class="cara cara6"></aside>
</div>
</div>
Comenzamos con este div, por el momento solo son div planos, comunes y corrientes, antes de comenzar adecuamos el espacio, en este punto podemos modificar la perspectiva, y el origen de esta.
Sabes, la perpectiva es muy importante para crear estructuras 3D, ya que esta perceptiva puede otorgarte profundidad, te dejo 2 enlaces para que aprendas un poco de ella
https://www.w3schools.com/cssref/css3_pr_perspective.asp https://developer.mozilla.org/es/docs/Web/CSS/perspective
En este caso voy a definir mi espacio para que la perspectiva este desde el frente y un poco arriba,
div.espacio3D
{
position: relative;
top: 30px;
left: 40%;
width: 150px;
height: 150px;
perspective: 1750px;
perspective-origin: center -250%;
}
Si revisas, he creado un espacio 3D( simplemente agregan las perpectiva, lo restante son propiedades comunes)
Cuando esta creado este campo, voy a crear una animación la cual gire el cubo (sera mas fácil para ver efecto 3D)
div.cubo3D
{
position: relative;
width: 100%;
height: 100%;
transform-origin:50%;
animation-name: gira;
animation-duration: 5s;
transform-style: preserve-3d;
animation-iteration-count: infinite;
transform: translateZ(-50px) rotateY(-5deg);
}
en este punto, no lo pienses mucho, lo unico que estoy es agregando una animación de giro y aocmodo al cuadro de cierta manera, si quieres ver como rota al final puedes añadir el siguiente keyframes
@keyframes gira
{
0%
{
transform: translateZ(-50px) rotateY(45deg);
}
100%
{
transform: translateZ(-50px) rotateY(-315deg);
}
}
Como te explique al principio, las estructuras 3D, se basan en estructuras 2D, ves los 6 aside, estas serán las 6 caras que conforman el cubo (4 en los lados, una arriba, y otra debajo)
Agregamos los efectos que tendrán todas las caras, los comunes que son:
aside.cara
{
position: absolute;
width: 200px;
height: 100px;
color: black;
font-size: 60px;
text-align: center;
line-height: 100px;
background-color: #fddb35;
}
Ten en cuenta el ancho y alto de cada cara, esto significa que todas van a medir lo mismo, asi el cubo quedará perfecto, una vez tengamos esto ya solo seria acomodar cada cara como mejor queramos, las posiciones siempre en 3D debes hacerlo con transformaciones, esas son:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ https://www.w3cschool.cn/doc_css/css-transform-function-translatez.html
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX
si quieres ver como se cuadra cada cara y como se ve al final este cubo puedes terminar de ver el codigo en este enlace
Si te fuí de ayuda, acuerda marcar esta respuesta, suerte y cualquier duda, coméntame.