3d Heart Animation
Home
Snippets
3d Heart Animation
HTML
CSS
JS
<div class="heart3d"></div>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: black; } .heart3d { position: absolute; top: 25%; left: 25%; width: 200px; height: 325px; transform-style: preserve-3d; animation: spin 15s infinite linear; } .heart3d div { position: absolute; opacity: 0; width: 200px; height: 325px; border: solid red; border-radius: 50% 50% 0 / 40% 50% 0; border-width: 1px 1px 0 0; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.25); } @keyframes spin { to { transform: rotateY(360deg) rotateX(360deg); } } @keyframes appear { to { opacity: 1; } }
const heart = document.querySelector(".heart3d"); for (let i = 1; i <= 36; i++) { let rib = document.createElement("div"); rib.style.animation = `appear 1s ${i * 0.1}s infinite alternate linear`; rib.style.transform = `rotateY(${i * 10}deg) rotateZ(45deg) translateX(62px)`; heart.appendChild(rib); }
Ad #1
Ad #2
Scroll to Top