‘Hina matsuri’ also called Girl’s Day or Doll’s Day, is a special day in Japan on March 3rd. Stair platforms covered with a red carpet are used to display dolls representing the emperor, empress, and attendants in a Heian court setting. My koto (Japanese zither) teacher had a full set in her house that I’m sure set her back a pretty penny (or yenny?).
I made a 3D card with the emperor and empress! As with many of my pages, I thought this would be a fast page as I already knew about css 3d transforms. It ended up taking much longer because the pieces of ‘paper’ would flicker when rotated and the doll images would jump back and forth between divs. I had to fix it by moving the dolls outside of the transformed divs.
After I set up the card, I thought it would be great if it could open and close like a real popup card! Again, it should be easy since the motion would just be a css transform… but it wasn’t. I tried for a while to get just the back part to close down but the transformation would always float the div up before closing down. In the end I added left and right rotate options and finished the page without closing the card.
I kept thinking about why the transformation was off and a day later realized it was before I had forgotten to add transform perspective into the keyframes. I had mistakenly assumed that since perspective was applied to the initial transformation, it was not needed again. I will have to try the “popup closing” effect again with another page!
Day 48 – Doll Festival