DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • The Ultimate Guide to Code Formatting: Prettier vs ESLint vs Biome
  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js
  • Next.js Theming: CSS Variables for Adaptive Data Visualization

Trending

  • MCP Client Agent: Architecture and Implementation
  • Cognitive Architecture: How LLMs Are Changing the Way We Build Software
  • Converting List to String in Terraform
  • How to Marry MDC With Spring Integration
  1. DZone
  2. Coding
  3. Languages
  4. Interactive 3D Dodecahedron in CSS3

Interactive 3D Dodecahedron in CSS3

By 
John Esposito user avatar
John Esposito
·
Jan. 06, 12 · Interview
Likes (0)
Comment
Save
Tweet
Share
11.4K Views

Join the DZone community and get the full member experience.

Join For Free

Thursday's CSS3 bitmaps were clever and fun, but a little counter-HTML5-cultural: the whole point of SVG, Canvas, and so forth, is that vectors are better, because simpler, than bitmaps.

Today's interactive geometric CSS3 shape is just the opposite: far more pixels than pre-rendering could possibly justify, emphatically composed of 2D surfaces, and fully animated in 3D.

It's a folding/unfolding dodecahedron (not in FF/IE):

On to the code:

Because it's a simple shape, the div-organization is too plain to be interesting. 

The CSS is more satisfying -- with each side-pentagon transformed around x, y, and z axes, as dodecahedronity requires:

#dodecahedron.closed #group5 {
	-webkit-transform: rotateZ(-324deg) rotateX(63deg);
	-moz-transform: rotateZ(-324deg) rotateX(63deg);
	transform: rotateZ(-324deg) rotateX(63deg);
}

and each pentagon defined with gratuitously pleasing transparency:

.p2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 59px solid #ff0000;
    border-left: 81px solid transparent;
    border-right: 81px solid transparent;
}

The JavaScript is what you might guess after a few seconds' interaction -- but is written efficiently and clearly enough to merit a look.

Worth checking out, as an excellent, direct instantiation of several cool CSS3 elements.

CSS

Opinions expressed by DZone contributors are their own.

Related

  • The Ultimate Guide to Code Formatting: Prettier vs ESLint vs Biome
  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js
  • Next.js Theming: CSS Variables for Adaptive Data Visualization

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: