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

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

伴随互联网高速发展，大数据在体量和传输效率上都进入了新的发展阶段。其价值不言而喻。而数据可视化，又在极大程度上方便了大数据价值的视觉呈现，而对于一个优秀的前端而言，我们更加关注如何实现数据可视化。这里面涉及的知识领域其实很多，包括数据源整合、数据抽取、数据清洗、数据建模、数据可视化展示等等内容。

---

一、数据可视化是什么？

数据可视化主要是借助于图形化手段，清晰有效地传达与沟通信息，将不可见的数据现象转化为可见的图形符号；将错综复杂、无法解释和关联的数据，建立联系和关联，发现过滤和特征

二、问题需求

1.示例demo

---

如果不看代码，你能想象到如何通过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) ;
  }
}