Wanderer above the Sea of Fog in 3D with HTML and CSS
Creating an interactive version of Caspar David Friedrich's "Wanderer above the Sea of Fog" with HTML and CSS in three dimensions.
Live demo and source code: https://alvaromontoro.com/demos/wande...
Edited the painting to separate the image into 8 layers (and cleared a little with GIMP, sorry for the artist purists). The layers are:
The person in the front
Fog
Mountains...
More mountains...
Even more mountains...
Used 3D translations on CSS to position the different layers at a distance (I had to apply a scale, too, so they would match in size). The result is a simple parallax effect that allows moving around the painting, giving the impression of perspective.