DEV Community

Cover image for Submission for Frontend Challenge Earth-Day-Edition: Earth's Rotation: Rotating with CSS on Earth Day
Dhanush
Dhanush

Posted on

Submission for Frontend Challenge Earth-Day-Edition: Earth's Rotation: Rotating with CSS on Earth Day

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day 2024

Inspiration

The inspiration for this CSS animation project was drawn from a YouTube channel named Online Tutorials dedicated to showcasing innovative CSS coding projects and creative web animations. As a subscriber to the channel, I was inspired by the diverse range of animations and visual effects demonstrated in their videos.
Video Link: CSS 3D Text Animation Effect

Demo

Below given is live link for the submission.
Live Link: Earth Day 2024 Rotate with CSS

Journey

Creating this CSS animation for Earth Day taught me:
Keyframes and Animations: How to define keyframes and create smooth animations using CSS.
Custom Properties: Using CSS variables to modularize code and adjust animation timing.
Positioning and Layering: Techniques for overlaying continent landscapes onto elements.
Styling: Applying CSS styles for text and element enhancements.
Animation Control: Experimenting with animation timing and easing functions for desired effects.

Thank You!

Top comments (1)

Collapse
 
jorgedelcampo profile image
Jorge del Campo

This 3D cylinder looks great! Congrats for the result! ๐Ÿ˜ฎ๐ŸŽ‰