//- Front
//- Back
//- Right
//- Left
//- Top
//- Bottom
mixin cuboid(className)
.cuboid(class=className)
- let s = 0
while s < 6
.cuboid__side
- s++
.scene
//- Plane that all the 3D stuff sits on
.plane
+cuboid()
View Compiled
*
box-sizing border-box
:root
--perspective 800
--rotate-x -15
--rotate-y -40
--transform-style preserve-3d
--cuboid-width 10
--cuboid-height 10
--cuboid-depth 10
--exploded 0
body
min-height 100vh
// overflow hidden
background hsl(0, 0%, 90%)
.scene
perspective calc(var(--perspective, 800) * 1px)
transform-style var(--transform-style)
height 100vh
width 100vw
display flex
align-items center
justify-content center
.plane
height calc(var(--plane-height, 25) * 1vmin)
width calc(var(--plane-width, 25) * 1vmin)
transform-style var(--transform-style)
transform rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translate3d(0, 0, 0)
// This is what makes the CSS variable powered cuboid
.cuboid
--width var(--cuboid-width, 15)
--height var(--cuboid-height, 10)
--depth var(--cuboid-depth, 4)
height calc(var(--depth) * 1vmin)
width calc(var(--width) * 1vmin)
position absolute
transform translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg))
transform-style var(--transform-style)
&__side
transform-style var(--transform-style)
transition transform 0.25s ease
& > div:nth-of-type(1)
height calc(var(--height) * 1vmin)
width 100%
transform-origin 50% 50%
transform rotateX(-90deg)
position absolute
top 50%
left 50%
transform translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / (2 - var(--exploded))) * 1vmin))
& > div:nth-of-type(2)
height calc(var(--height) * 1vmin)
width 100%
transform-origin 50% 50%
transform translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / (2 - var(--exploded))) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(3)
height calc(var(--height) * 1vmin)
width calc(var(--depth) * 1vmin)
transform translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / (2 - var(--exploded))) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(4)
height calc(var(--height) * 1vmin)
width calc(var(--depth) * 1vmin)
transform translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / (2 - var(--exploded))) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(5)
height calc(var(--depth) * 1vmin)
width calc(var(--width) * 1vmin)
transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / (2 - var(--exploded))) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(6)
height calc(var(--depth) * 1vmin)
width calc(var(--width) * 1vmin)
transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / (2 - var(--exploded))) * -1vmin)) rotateX(180deg)
position absolute
top 50%
left 50%
.cuboid
top 50%
left 50%
transform translate(-50%, -50%)
.cuboid div
background hsla(90, 80%, 50%, 0.15)
border 0.5vmin solid #111
View Compiled
// Purely for debugging purposes
const {
dat: { GUI },
} = window
const CONTROLLER = new GUI()
const CONFIG = {
'rotate-x': -24,
'rotate-y': -40,
exploded: false,
'transform-style': true,
}
const UPDATE = () => {
Object.entries(CONFIG).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--${key}`, value)
})
document.documentElement.style.setProperty(
'--transform-style',
CONFIG['transform-style'] ? 'preserve-3d' : 'flat'
)
document.documentElement.style.setProperty(
'--exploded',
CONFIG['exploded'] ? 1 : 0
)
}
const PLANE_FOLDER = CONTROLLER.addFolder('Plane')
PLANE_FOLDER.add(CONFIG, 'rotate-x', -360, 360, 1)
.name('Rotate X (deg)')
.onChange(UPDATE)
PLANE_FOLDER.add(CONFIG, 'rotate-y', -360, 360, 1)
.name('Rotate Y (deg)')
.onChange(UPDATE)
CONTROLLER.add(CONFIG, 'exploded')
.name('Exploded view')
.onChange(UPDATE)
CONTROLLER.add(CONFIG, 'transform-style')
.name('Transform style 3D')
.onChange(UPDATE)
UPDATE()
View Compiled
This Pen doesn't use any external CSS resources.