我如何为这个钻石图像设置动画，使其看起来像 3d 钻石向下旋转？

Question

I want to animate this diamond diamong images in such a way it look like a real diamond is rotating. As a 3d diamond is rotating downward. Please help me it means a lot. Thanks.

what i try

animation is used in second section of website

<section class="relative flex items-center justify-center w-screen h-screen bg-gray-600">
    <div class="absolute w-40 h-20 top-28" >
        <div class="">
            <img  class="ml-3 w-36 diamond_animtion"  src="fake/diamond.png" alt="">
        </div>
        <img class="absolute ml-12 top-14" style="width: 70px;" src="fake/Prong.png" alt="">
    </div>
    <img class="w-96 h-96" src="fake/ring.png" alt="">
</section>

how i can slow down animation speed

Answer 1

You can do the trick using css overflow and background position, then use JS to make it move.

 let height = 0, steps = 0; const animation = setInterval((function() { height += 290.35, document.getElementById("diamond").style.backgroundPosition = `0px -${height}px`, 18 == steps++ && clearInterval(animation) }), 42); //With scroll

 #diamond { height: 290px; width: 351px; background: url('https://i.stack.imgur.com/HplbX.png') 0px 0px; background-size: 100%; overflow: hidden; }

 <div id="diamond"> </div>

According to your example, here's could be a solution to animate diamond when scroll.

NOTE: This solution is not suitable for production because of scroll steps glitch but you can use it and modify to fit your needs

 let bounding, height = 145, //Equal your diamond CSS height topPos = 0, scrollPos = 0, steps = 0, diamond = document.getElementById("diamond"); function scrollDiamond(o) { "down" === o && steps < 18 ? (act = `0px -${topPos+=height}px`, steps++) : "up" === o && steps > -1 && (act = `0px -${topPos-=height}px`, steps--) diamond.style.backgroundPosition = act; } window.addEventListener("scroll", (function() { bounding = document.body.getBoundingClientRect().top; bounding > scrollPos ? scrollDiamond("up") : scrollDiamond("down"), scrollPos = bounding }));

 body { height: 200vh; } #diamond { position: fixed; /* Your image heigh divided by 40 (or whatever you want) */ height: 145px; width: 175px; /* Your image width divided by 40 (or whatever you want)*/ background: url('https://i.stack.imgur.com/HplbX.png') 0px 0px/100%; }

 <div id="diamond"></div>