CSS 图片如何做倾斜的轮盘旋转效果

Question

如何让这张图片旋转起来，围绕中心点旋转，像底盘一样，实在是写不出来了，请路过大佬指导

Answer 1

找一张圆的，然后倾斜至图里这样，然后绕纵轴旋转，写了个简单的demo，其中style部分和html是这样的，由于写动画比较费事我就用的hover，原理是img外面的div倾斜，然后外层divhover时img旋转，如果用动画的话，直接img一直转就行了

<style>
      #box {
        height: 400px;
        width: 400px;
      }
      #box{
        transform:rotateX(110deg);
      }
      img{
        transition: all 5s;
      }
      #x:hover img{
        transform:rotateZ(360deg);
      }
    </style>
<div id="x">
      <div id="box">
        <img src="https://img2.baidu.com/it/u=265533994,3088137633&fm=253&fmt=auto&app=138&f=JPEG" width="400px" height="400px" alt="">
      </div>
    </div>

Answer 2

假设一个这样的图片

可以用 CSS 动画实现

完整代码如下

.transformed {
    width:250px;height:250px;
    animation: spin 5s linear infinite;
}
@keyframes spin {
  from {
   transform:rotateX(75deg) rotateZ(0) ;
  }
  to {
   transform:rotateX(75deg) rotateZ(360deg) ;
  }
}

https://codepen.io/xboxyan/pe...