This article was published on .
How easy is it to keep a shadow's direction consistent whilst rotating an element?
Nearing the end of the work-day yesterday, I was struck with an idea. Having recently read through Google’s Visual Assets Guidelines on Behance and stumbling upon this awesome CodePen (actually a fork of Lionel’s, from Italy: https://codepen.io/elrumordelaluz/pen/dobAz):
My idea was as such: I wonder if I could create something similar to the clock above using CSS3 and maintain a persistent light source. The trouble with the usual approach is that in using
transform on an element, you are manipulating it’s
left attributes as you see them. If you
transform: rotate3d(0, 0, 1, 90deg); a box, what you now see as the top of the box is in fact it’s
left attribute. These shadow effects are typically done with
box-shadow, and as the element rotates, the shadow will rotate with the element—
box-shadow: 2em 2em 0 black; would produce a diagonal bottom-right shadow with no transform, but with
transform: rotate3d(0, 0, 1, 90deg); it would become a diagonal bottom-left shadow…
We’ve hit a snag! permalink
How does that work? permalink
Well, maybe if we’re
animateing an element (or pseudo element) and manipulating its
transform attribute, we can also change the
box-shadow property at the same rate. Using the same example as above, if we say that when the box has the rule
transform: rotate3d(0, 0, 1, 90deg);, it should also have
box-shadow: 2em -2em 0 black;, which puts a shadow on the top-right of the box, which appears to be the bottom-right, as desired. Now, by switching from a 0-degree rotation to a 90-degree rotation at the same speed as we change from a bottom-right to a top-right shadow (and continuing this pattern for the full 360-degree rotation), our effect is be complete!
It may be interesting to note that as the medium we’re working with is composed of boxes, we need to add a point in our animation for every corner in our rotation—since we are going a full 360-degrees, we need four defined points, not including the
What else is there? permalink
What else do you think we could do with an effect like this? I think it could do from some simplification, and I wonder if there’s a solution more basic than this. If you know, let me know in the comments, or send me a pen!
A little something-something extra, just for you permalink
Firstly, a CSS3 checkbox. Uses an invisible
<input type="checkbox"> field and an
:after attribute to toggle the style of the checkbox.
And secondly, here’s a gimmicky mockup I made as a joke to demonstrate to a friend at work that converting from left-to-right to right-to-left text was a piece of cake.