72 lines
1.5 KiB
CSS
Executable file
72 lines
1.5 KiB
CSS
Executable file
:root {
|
|
--cube-size: 70px; /* Tamaño reducido de los cubos */
|
|
--line-color: #333;
|
|
--hover-color: #2ecc71;
|
|
}
|
|
|
|
.graph-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #000;
|
|
border: 1px solid #ddd;
|
|
margin: 20px auto;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.cube-container {
|
|
position: absolute;
|
|
width: var(--cube-size);
|
|
height: var(--cube-size);
|
|
transform-style: preserve-3d;
|
|
transition: transform 1s;
|
|
}
|
|
|
|
.cube-container:hover {
|
|
transform: rotateX(360deg) rotateY(360deg);
|
|
}
|
|
|
|
.cube {
|
|
position: absolute;
|
|
width: var(--cube-size);
|
|
height: var(--cube-size);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.face {
|
|
position: absolute;
|
|
width: var(--cube-size);
|
|
height: var(--cube-size);
|
|
background-color: var(--hover-color);
|
|
border: 1px solid #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.7rem;
|
|
color: white;
|
|
}
|
|
|
|
/* Posiciones de las caras del cubo */
|
|
.front { transform: translateZ(calc(var(--cube-size) / 2)); }
|
|
.back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
|
|
.left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
|
|
.right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
|
|
.top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
|
|
.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
|
|
|
|
.lines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.line-path {
|
|
stroke: var(--line-color);
|
|
stroke-width: 2;
|
|
transition: stroke 0.3s;
|
|
}
|
|
|
|
.line-path:hover {
|
|
stroke: #e74c3c;
|
|
}
|