Persistent Shadows

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):
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!
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 top
, right
, bottom
, and 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 ¶
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!
How does that work? Permalink ¶
Well, maybe if we’re animate
ing 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 0%
and 100%
duplicates.
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.
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!
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.
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!