80 lines
1.8 KiB
CSS
Executable file
80 lines
1.8 KiB
CSS
Executable file
:root {
|
|
--cube-size: 80px;
|
|
--line-color: #333;
|
|
--hover-color: #2ecc71;
|
|
--background-color: #000;
|
|
--sidebar-width: 250px; /* Ajustamos el ancho del sidebar */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: flex-start; /* Asegura que el contenido comience desde la izquierda */
|
|
align-items: center;
|
|
height: 100vh;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.graph-container {
|
|
position: relative;
|
|
width: calc(100vw - var(--sidebar-width)); /* Restamos el ancho del sidebar */
|
|
height: 100vh;
|
|
margin-left: var(--sidebar-width); /* Añadimos margen para que no se solape */
|
|
}
|
|
|
|
.cube-container {
|
|
position: absolute;
|
|
width: var(--cube-size);
|
|
height: var(--cube-size);
|
|
transform-style: preserve-3d;
|
|
transition: transform 1s ease;
|
|
}
|
|
|
|
.cube-container:hover {
|
|
transform: rotateX(360deg) rotateY(360deg); /* Efecto al pasar el mouse */
|
|
}
|
|
|
|
.cube {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.face {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--hover-color);
|
|
border: 1px solid #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.65rem;
|
|
color: white;
|
|
}
|
|
|
|
.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;
|
|
}
|