cube

this is the most complex web page i have ever made by a huge margin

so for the past little while i’ve been making a big update to my personal website. it’s a cube now! i wanted to make sure it worked in several browsers:

you know, the big four.

i got there in the end, with mostly satisfactory results.

first try

the first incarnation of the cube was very elegant. the sides were moved with 3d transforms, and were brought to the front by applying a transformation to the whole cube. it didn’t even need javascript!

if you have a document that looks like this…

<nav>
  <!-- page switcher -->
  <input type=radio name=page id=r-one>
  <input type=radio name=page id=r-two>
</nav>

<main>
  <!-- pages -->
  <section id=one> 1111111111111111 </section>
  <section id=two> 2222222222222222 </section>
</main>

…you can make a page switcher like this!

/* hide sections by default */
main > section { display: none; }

/* show one if r-one is checked, and same for two/r-two */
body:has(#r-one:checked) #one { display: block; }
body:has(#r-two:checked) #two { display: block; }

the last two rules say that if the body contains a thing called r-one (or r-two) which is checked, then a descendant called one (two) should be displayed. add four more sections and some a lot of css, and you got yourself a cube babey.

but it wasn’t to last, because firefox ESR and qutebrowser don’t support :has(). in a few years you might be able to do this though.

second try

ok, fine, i’ll use javascript.

one thing about putting the pages on a cube is that the front is overlapping with the back on the page. obviously. but this means that sometimes scrolling or selecting text ends up on the back face you can’t see. so all sides except the front have pointer-events: none applied, so you can’t accidentally click links you can’t see, or whatever.

this worked fine in latest firefox (well, so did the non-javascript one). but in chrome, the faces that started on the left and right sides wouldn’t respond to the mouse when brought to the front. just those two. presumably this had been happening the whole time, and i just hadn’t noticed yet.

third try (how the sausage is made)

ok so. rotating the whole cube at once is a bust. fine. i’ll manipulate each side individually then.

now i’m keeping a state for each pane, of which face it is on, and how it is rotated. annoying, because composition of transformations isn’t commutative, so currently i just have some big lookup tables to do that (sorry i am bad at computer and also at algebra).

oh no now the sides are moving separately, like i told them to, and the transition looks all nutso! so what it actually does is:

  1. give the whole cube a transition style
  2. rotate the whole cube
  3. remove the transition style
  4. de-rotate the cube (which, after c, is non-animated)
  5. move the individual sides into place

urgh

in a way, this was a good thing. i can now animate the z-axis transform separately to the other two, which i think looks nicer, and i can give the cube an idle “breathing” animation so hopefully people stop asking if the sides are supposed to be touching.

both of those would have been harder with the whole-cube rotation. silver lining or whatever.

other stuff