如何在React JS中制作360度旋转滑块

Question

图片供参考。我找过了，但没有找到。

所以一旦用户点击任何图标图标就会旋转并聚焦输入图片描述

实际上我正在寻找这样的滑块http://www.webdesign-flash.ro/p/s3dcar/example2.html

Answer 1

您不需要库。你要找的是旋转CSS函数

所以只需添加一个状态来记录点击属性并添加"rotated"(你可能想要添加一个过渡)CSS类，基于组件是否被点击。

Answer 2

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>