a (shitty) tutorial that will teach YOU how to trap website visitors in an evil cube with an anime guy and a scary monster using ONLY css and html. jank, but better than nothin!
CSS has 3D transforms; largely this is used for gussying up CSS animations. it's another dimension you can add to a rotation, basically, as demonstrated on w3schools and in this little listicle.
first, here's an actual tutorial for making a cube, which i am stealing from. this is pretty much all you really need to get going, but i'll keep yammering for a bit anyway!
let's remove the animation, since that's not the point here, and i'll provide a bit more elaboration on what this code is doing!
.container {
width: 200px;
height: 200px;
perspective: 500px;
margin: 100px;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
the second container, "cube", its job is to be the "anchor point" for the cube. it has position:relative so that each absolute-positioned face of the cube is positioned relative to it, and it has the "preserve-3D" aspect that tells it to respect the 3-dimensional positioning that's going to happen.
"cube" is the cube's skeleton, basically.
so, each face of the cube is square div of the same size manipulated into the shape of a cube. imagine you have six squares of glass that you're gluing together, if that helps.
to trap our visitors inside of this cube, we need to make the cube big, centered, and do a bit more tinkering.
tinkering 1: switch up the rotation on the sides; since we're putting people inside the cube, we don't want back, left, and right to be facing the outside!
tinkering 2: remove the front face of the cube; we want the sense of being "inside" the cube more than "outside looking in". (its display is set to "none" because it's coming back later!)
See the Pen step by wretch (@xixxii) on CodePen.
bigger faces require bigger spacing. for a 200x200 face, they're moved 100px and -100 px; so for a 1000px cube we want 500px and -500px instead.
now we have a huge cube!
See the Pen step2 by wretch (@xixxii) on CodePen.
(psst: if you wanna see something cool, change the 500s back to 100s in this.)
this huge cube is getting there, but it's not very convincing yet...
3D objects have perspective and perspective-origin. perspective-origin moves the viewer around, and perspective is more like messing with the camera.
you can do some experiments with different number values. for now let's go with perspective-origin: 50% 50% and perspective 1000px.
you may notice some seriously weird scrolling stuff happening; hiding the overflow is the way i know how to deal with that. it seems to happen about half the time.
i'm going to move the cube up a bit using a negative top margin, because i don't wanna see a lot of the ceiling!
sorry for bad practices. i did say it was going to be a shitty tutorial! if you know a better way to do this, please do it.
here's where we're at now! (opacity is now normal on cube faces.)
See the Pen Untitled by wretch (@xixxii) on CodePen.
let's decorate our cube! put some wallpaper on the walls and a floor on the floor!
they're just divs, remember, so you can do whatever you want. for the purposes of "room construction", i'm going to put in wallpaper for left, right, and back, flooring on the bottom, and delete the visible borders.
See the Pen step4 by wretch (@xixxii) on CodePen.
mmmm...... stylish. i've also changed the color of the ceiling to be a kind of beigey offwhite.
now it is time to put a guy inside of the cube for visitors to make friends with. there are two ways you could do this: take your cube layout as a backdrop and just do some absolute positioning to put things on top of it is one way; if you wanna do that, then, you're done here! congrats!!
the other way is by putting him properly inside of the cube, and making him affected by cube perspective.
this is cube time, so he's going in the cube. this is going to be a bit silly.
let's make the front panel come back. we're going to move it backwards using its z positioning.
See the Pen GYAH by wretch (@xixxii) on CodePen.
the anime guy is going to be in this div! i'm going to put the anime guy in there and position him so it looks like he's standing on the floor.
i'm gonna have him talking, also.
See the Pen step6 by wretch (@xixxii) on CodePen.
we can add more divs for more layers, by the way; let's add a layer behind the anime guy with a scary monster in it. the monster will be towards the back of the room.
this layer is going to be the same as the "front" panel, just pushed further back along the Z axis.
See the Pen step7 by wretch (@xixxii) on CodePen.
look out, ichigo from bleach!!
now, though, the cube is complete! you can rotate the cube, change the perspective, change perspective-origin, and even make yourself sick with css animations!
ta-daaaaaaa!!!
See the Pen step8 by wretch (@xixxii) on CodePen.
it's a bit inconsistent about it, but you may have noticed some problems with flickering, weird scrolling behavior, and other assorted visual discomforts; i do not know why these happen but assume it is because i am playing with dark forces beyond my comprehension. (you are not really supposed to put people inside of cubes i think.) using overflow:hidden on the body pretty much fixes it; i'm sure there's a better way.
you CAN make a responsive cube. i haven't played around with it beyond figuring out the most basic ability to resize the cube, but here is a resizable version. maybe you can figure it out better than me!
See the Pen responsive cube by wretch (@xixxii) on CodePen.