How I can animate this diamond image so it looks as 3d diamond is rotating downward?-CodePudding

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  >
        <div >
            <img    src="fake/diamond.png" alt="">
        </div>
        <img  style="width: 70px;" src="fake/Prong.png" alt="">
    </div>
    <img  src="fake/ring.png" alt="">
</section>

how i can slow down animation speed

CodePudding user response：

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>