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

3 1 1 1 1

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
jorgedelcampo profile image
Jorge del Campo

This 3D cylinder looks great! Congrats for the result! 😮🎉

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more