Back
Discover the immersive world of 3D UI with the Transforming Dodecahedron, a button that morphs through captivating shapes when toggled.
<main class="dodecahedron-container">
<button onclick="toggleDodecahedron()" class="dodecahedron-button" aria-label="Toggle Dodecahedron">
<span class="toggle-indicator">Inactive</span>
</button>
</main>
toggleDodecahedron 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";
}
}
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.
<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
No comments yet. Be the first to comment!