Recently one of my students asked if it was possible to free-rotate an element on screen using mouse or touch movement. As my first semester classes concentrate on just HTML5 and CSS, the answer had to be “No, not without JavaScript”… but this solution needs only a few lines of JS, and this variation has the interesting addition of CSS variables.

Read more about 3D Rotation w/ CSS Variables

For a long time I’ve been interested in making a text crawl for web pages where the text moved around corners. While there are several ways of accomplishing this - WebGL among them - I wanted a solution that would be fairly straightforward, one that could be written using just HTML and CSS.

Read more about Wrapped 3D Marquee Text

“Cinemagraphs” are animated photographs that feature repeated and subtle movement. Early experiments by Kevin Burg and Jamie Beck in fashion photography led to the format’s modern popularity.

But GIFs - the usual source for cinegraphs - aren’t a video format, and can’t be controlled very well. In addition, creating a true cinemagraph can require a lot of work. Over the weekend I realized that for some images the same effect could be created using CSS 3D transforms. As an alternative to the expense of shooting full video, this could be a valuable, performant and efficient technique for product demos and visualizations.

Read more about Cinemagraphs w/ 3D Transforms