基于React的环形3D旋转动画可视化效果

背景

客户的需求是实现一个旋转可视化的环形3D旋转东环，用来展示4个重要的数据，如下图所示

最终我们的想法是，使用css和js的方法实现此图形。

实现

html代码

<div className={styles.box}>
    <div className={classNames(styles.cricle, { [styles.start]: start })}>
      <div className={styles.num}>
        {/* <div style={getActiveStyle(active === 1 || activeNext === 1)}>
          {_.get(datasource, '[0].num')}
        </div> */}
        <div style={getActiveStyle(active === 1 || activeNext === 1)}>累计访问量</div>
      </div>
      <div className={styles.num}>
        {/* <div style={getActiveStyle(active === 2 || activeNext === 2)}>
          {_.get(datasource, '[1].num')}
        </div> */}
        <div style={getActiveStyle(active === 2 || activeNext === 2)}>浏览人数</div>
      </div>
      <div className={styles.num}>
        {/* <div style={getActiveStyle(active === 3 || activeNext === 3)}>
          {_.get(datasource, '[2].num')}
        </div> */}
        <div style={getActiveStyle(active === 3 || activeNext === 3)}>当日访问量</div>
      </div>
      <div className={styles.num}>
        {/* <div style={getActiveStyle(active === 4 || activeNext === 4)}>
          {_.get(datasource, '[3].num')}
        </div> */}
        <div style={getActiveStyle(active === 4 || activeNext === 4)}>填报人数</div>
      </div>
    </div>
  </div>

css代码

.box{
  position: relative;
  width: 1000px;
  height: 600px;
  margin: 0 auto;
  perspective: 2000px;
  transform-style: preserve-3d;
  // border: 1px solid green;
}

.cricle {
  width: 1000px;
  height: 600px;
  position: relative;
  // animation: cricle 20s linear infinite;
  transform: rotatex(-10deg) rotatey(0deg);
  transform-style: preserve-3d;
  /* border: 1px solid red; */
}

.start {
  animation: cricle 20s linear infinite;
}

@keyframes cricle {
  0%{
    transform: rotatex(-3deg) rotateY(0deg);
  }

  100%{
    transform: rotatex(-3deg) rotateY(360deg);
  }
}

.num{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30px;
  text-shadow: 0 0 30px #1864f6,0 0 30px #1864f6,0 0 30px #1864f6;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -63px;
  margin-left: -169px;
  width: 378px;
  height: 126px;
  background-image: url(./centerText.png);
  background-size: cover;
}

.num:nth-of-type(1){
  transform: rotateY(90deg) translateZ(400px);
}
.num:nth-of-type(2){
  transform: rotateY(180deg) translateZ(400px);
}
.num:nth-of-type(3){
  transform: rotateY(270deg) translateZ(400px);
}
.num:nth-of-type(4){
  transform: rotateY(360deg) translateZ(400px);
}

这样基本上就实现了静态的布局，只需要再使用js使模块转起来即可。
最终效果图如下所示：


如需下载资源：https://download.csdn.net/download/tianbiancai1/88468940