How i can make the 360 Deg rotating slider in React JS-CodePudding

Here is the image for reference Is there any lib. I searched but have not found it.

So once the user clicks on any of the icons that icon will rotate and come to focus enter image description here

CodePudding user response：

You don't need a library for that. What you're looking for is the rotate CSS function.

So simply add a state that records the clicked property and adds a "rotated" (you likely want to add a transition) CSS class based on if the component is clicked.

CodePudding user response：

div {
  width : 300px;
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50% , -50%);
  height : 300px;
  background-color : #ccc
  
}

img {
transition : 1s;
width : 100%;
}

div:hover img{
  transform : rotate3d(0 , 1 , 0,180deg)
}

<div>
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" />
</div>