59 lines
1.6 KiB
SCSS
59 lines
1.6 KiB
SCSS
|
|
.scene figure.cuboid.rectangular {
|
|
// Three parameters: width (x), length (y), and depth (z)
|
|
--pwidth: var(--width, 100px);
|
|
--plength: var(--length, 100px);
|
|
--pdepth: var(--depth, 100px);
|
|
|
|
--halfdepth: calc(var(--pdepth) / 2);
|
|
--halflength: calc(var(--plength) / 2);
|
|
|
|
--mhalfwidth: calc(var(--pwidth) * -1);
|
|
--mhalflength: calc(var(--plength) * -1);
|
|
--mhalfdepth: calc(var(--pdepth) * -1);
|
|
|
|
width: var(--pwidth);
|
|
height: var(--plength);
|
|
|
|
& > .face {
|
|
position: absolute;
|
|
|
|
&.front {
|
|
width: var(--pwidth);
|
|
height: var(--plength);
|
|
transform: rotateY(0deg) translateZ(var(--halfdepth));
|
|
|
|
}
|
|
&.back {
|
|
width: var(--pwidth);
|
|
height: var(--plength);
|
|
transform: rotateY(180deg) translateZ(var(--halfdepth));
|
|
}
|
|
|
|
&.left {
|
|
width: var(--pdepth);
|
|
height: var(--plength);
|
|
transform: rotateY(-90deg) translateZ(var(--halfdepth));
|
|
}
|
|
&.right {
|
|
width: var(--pdepth);
|
|
height: var(--plength);
|
|
transform: translateX(var(--pwidth)) rotateY(-90deg) translateZ(var(--halfdepth));
|
|
|
|
}
|
|
|
|
&.top {
|
|
width: var(--pwidth);
|
|
height: var(--pdepth);
|
|
transform: rotateX(90deg) translateZ(var(--halfdepth));
|
|
|
|
}
|
|
&.bottom {
|
|
width: var(--pwidth);
|
|
height: var(--pdepth);
|
|
transform: translateY(var(--plength)) rotateX(90deg) translateZ(var(--halfdepth));
|
|
}
|
|
}
|
|
}
|
|
|