Back
The Transforming Dodecahedron: A 3D Toggle Button Adventure
Discover the immersive world of 3D UI with the Transforming Dodecahedron, a button that morphs through captivating shapes when toggled.
Component Explanation
Creating a 3D Interactive Dodecahedron Toggle Button
HTML - Structuring the Dodecahedron
In this section, we'll structure a unique 3D toggle button using a simple button element wrapped within a main tag. The button visually transforms into a dodecahedron when interacted with.
<main class="dodecahedron-container">
<button onclick="toggleDodecahedron()" class="dodecahedron-button" aria-label="Toggle Dodecahedron">
<span class="toggle-indicator">Inactive</span>
</button>
</main>
JavaScript - Dynamic Transformation
In our JavaScript, we toggle between states to create a dynamic shape-shifting experience. ThetoggleDodecahedron function updates the button's appearance by toggling classes and text content, giving the impression of a 3D transformation.
let toggled = false;
function toggleDodecahedron() {
const button = document.querySelector('.dodecahedron-button');
const indicator = document.querySelector('.toggle-indicator');
toggled = !toggled;
if (toggled) {
button.classList.add('expanded-shape');
indicator.textContent = "Active";
} else {
button.classList.remove('expanded-shape');
indicator.textContent = "Inactive";
}
}
CSS - Styling and 3D Effects
Cascading Style Sheets (CSS) control the aesthetic appeal and functionality of our dodecahedron transformation. Key styles include rotation and scale changes that ultimately create our 3D effect.
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #ece9e6, #ffffff);
}
.dodecahedron-container {
perspective: 1000px;
}
.dodecahedron-button {
width: 100px;
height: 100px;
background-color: #6c757d;
border-radius: 10px;
border: none;
cursor: pointer;
font-size: 18px;
color: #ffffff;
font-weight: bold;
transform-style: preserve-3d;
transition: transform 1s;
display: flex;
justify-content: center;
align-items: center;
}
.dodecahedron-button:focus {
outline: 3px solid #007bff;
}
.expanded-shape {
transform: rotateX(180deg) rotateY(180deg) scale(1.3);
box-shadow: 0 0 15px rgba(0, 123, 255, 0.7), 0 0 20px rgba(23, 162, 184, 0.7);
}
The perception of depth and three-dimensionality is achieved through perspective and rotation, enriched by shadowing effects delivering a magical user interaction experience. This fascinating journey into UI creativity not only broadens the appeal of toggle mechanics but also redefines conventional usability.SEO and Accessibility Enhancements
Ensuring accessibility, the button includes an aria-label attribute to describe its function, essential for screen readers. Focus styles are incorporated for keyboard navigability, improving usability for everyone. Every aspect of this UI component not only emphasizes creativity but also adheres to SEO guidelines by using semantic HTML elements, increasing visibility across diverse platforms.Whole code
<main class="dodecahedron-container">
<button onclick="toggleDodecahedron()" class="dodecahedron-button" aria-label="Toggle Dodecahedron">
<span class="toggle-indicator">Inactive</span>
</button>
</main>
<script>
let toggled = false;
function toggleDodecahedron() {
const button = document.querySelector('.dodecahedron-button');
const indicator = document.querySelector('.toggle-indicator');
toggled = !toggled;
if (toggled) {
button.classList.add('expanded-shape');
indicator.textContent = "Active";
} else {
button.classList.remove('expanded-shape');
indicator.textContent = "Inactive";
}
}
</script>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #ece9e6, #ffffff);
}
.dodecahedron-container {
perspective: 1000px;
}
.dodecahedron-button {
width: 100px;
height: 100px;
background-color: #6c757d;
border-radius: 10px;
border: none;
cursor: pointer;
font-size: 18px;
color: #ffffff;
font-weight: bold;
transform-style: preserve-3d;
transition: transform 1s;
display: flex;
justify-content: center;
align-items: center;
}
.dodecahedron-button:focus {
outline: 3px solid #007bff;
}
.expanded-shape {
transform: rotateX(180deg) rotateY(180deg) scale(1.3);
box-shadow: 0 0 15px rgba(0, 123, 255, 0.7), 0 0 20px rgba(23, 162, 184, 0.7);
}
</style>
Thank you for reading this article.
Comments