CSS Realizes 3D Spherical Character Cloud

In large-screen visualization applications, there are many scenes that use 3D. Complex interactive animations are usually implemented using Three.js or echarts-gl, but in some simple 3D scenes, CSS can also achieve some good display effects. This article uses CSS related attributes - transform-style, transform, animation to implement a simple 3D character cloud display function, the specific display effect is as follows

 In the case, except for the upper and lower vertices, there are 5 circles of square cards, each circle consists of 12 pieces, and the spherical radius is 200px. Through rotation and translation, each card can be arranged in order. The specific implementation code is as follows

<template>
  <div class="container">
    <div class="platform">
      <div
        v-for="(item, index) in itemList"
        :key="index"
        :style="item.styleStr"
      >
        {
   
   { item.text }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [], // 球面字符牌面信息
      radius: 200, // 球形半径
      rotateArr: [60, 30, 0, -30, -60], // 每一圈绕X轴旋转的度数
      num: 12, // 每一圈有几个牌面
    };
  },
  mounted() {
    this.calcPosition();
  },
  methods: {
    calcPosition() {
      let numFlag = 0;
      let gap = 360 / this.num;
      this.rotateArr.forEach((item) => {
        for (let i = 0; i < this.num; i++) {
          numFlag += 1;
          this.itemList.push({
            text: numFlag,
            styleStr: `transform: rotateY(${
              i * gap
            }deg) rotateX(${item}deg) translateZ(${this.radius}px)`,
          });
        }
      });
      // 上极点
      this.itemList.push({
        text: (numFlag += 1),
        styleStr: `transform: rotateY(0deg) rotateX(90deg) translateZ(${this.radius}px)`,
      });
      // 下极点
      this.itemList.push({
        text: (numFlag += 1),
        styleStr: `transform: rotateY(0deg) rotateX(-90deg) translateZ(${this.radius}px)`,
      });
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000;
}
.platform {
  width: 100%;
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateZ(10deg) rotateY(0deg);
  animation: rotate 10s linear infinite;
}
.platform:hover {
  animation-play-state: paused;
}
@keyframes rotate {
  from {
    transform: rotateX(-20deg) rotateZ(10deg) rotateY(0deg);
  }

  to {
    transform: rotateX(-20deg) rotateZ(10deg) rotateY(360deg);
  }
}
.platform > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 127, 127, 0.5);
  outline: 1px solid rgba(127, 255, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  backface-visibility: visible;
  color: rgba(127, 255, 255, 0.75);
  font-size: 16px;
  text-shadow: 0 0 5px rgb(0 255 255 / 50%);
  font-weight: bold;
}
</style>

Regarding the use of CSS to realize 3D functions, it is important to have a certain spatial imagination ability, and various transformation effects can be achieved by combining attributes such as rotation and translation.