在数据可视化大屏 项目中，经常会遇到下图这样的底座，一直在想如何实现让他旋转的动画呢？今天看到一个数据可视化大屏案例，学到了，通过css3就可以完成。

html

<div class="cicle3">

</div>

css

.cicle3 {
  background: url(./images/circle.png) no-repeat center;
  background-size: 100%;
  position: relative;
  width: 100%;
  height: 100%;
  top: 20%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 15s linear infinite;
}

// 旋转动画3
@keyframes rotate3 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0)
  }

  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(360deg)
  }
}

演示地址：

前端数据大屏可视化展示-数据可视化页面设计(含源码下载)