数据可视化大屏项目开发中，ui设计师做了一个下面的效果，文字是下面的3d倾斜效果，因为这些文字是要根据实际情况实时变化的，我们需要通过代码来达到这种文字效果。通过css修改一点调效果的话，显然是太慢了。文字3d倾斜调试。

我们需要一个快速达到预期效果的功能，这里我们知道通过transform属性可以达到我们想要的效果，但是具体参数我们不知道设置多少合适，我们可以使用gui工具把参数范围设置后，然后通过鼠标拖动来查看获取最终效果的代码。

在线演示

vue项目巧用gui工具快速调试效果

动态效果

完整实例代码

<template>
  <div class="itemMain">
    <div class="centerMain">
      <div class="icon1" ref="iconDiv">
        <div class="iconInner">
          <div class="info" :style="infoStyle">
            <p>{{ icon.task }}</p>
            <div :class="['number', icon.colorClass]">
              <span>{{icon.percentage}}</span>
              <span>%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="css-output">
      <h3>实时CSS代码：</h3>
      <pre>{{ cssOutput }}</pre>
    </div>
  </div>
</template>

<script>
import * as dat from 'dat.gui'

export default {
  data() {
    return {
      icon: {
        task: '待核查任务',
        percentage: 32.6,
        colorClass: 'yellow'
      },
      transformParams: {
        perspective: 890,
        rotateY: -8,
        rotateX: -10,
        skewX: -15,
        skewY: -10,
        rotateZ: -24
      },
      cssOutput: ''
    }
  },
  computed: {
    infoStyle() {
      const {perspective, rotateY, rotateX, skewX, skewY, rotateZ} = this.transformParams;
      return {
        transform: `perspective(``{perspective}PX) rotateY(``{rotateY}deg) rotateX(``{rotateX}deg) skew(``{skewX}deg, ``{skewY}deg) rotateZ(``{rotateZ}deg)`
      }
    }
  },
  methods: {
    initGUI() {
      const gui = new dat.GUI();
      Object.keys(this.transformParams).forEach(key => {
        gui.add(this.transformParams, key, -180, 180).onChange(() => {
          this.updateCSSOutput();
        });
      });
      this.updateCSSOutput();
    },
    updateCSSOutput() {
      const {perspective, rotateY, rotateX, skewX, skewY, rotateZ} = this.transformParams;
      this.cssOutput = `.info {
  transform: perspective(``{perspective}PX) rotateY(``{rotateY}deg) rotateX(``{rotateX}deg) skew(``{skewX}deg, ``{skewY}deg) rotateZ(``{rotateZ}deg);
}`;
    }
  },
  mounted() {
    this.initGUI();
  }
}
</script>

<style lang="scss" scoped>
.itemMain {
  position: relative;
  width: 100%;
  height: 100%;
}

.centerMain {
  position: relative;
  width: calc(100% - 100PX);
  margin-left: 50PX;
  height: calc(100% - 60PX);
  display: flex;
  justify-content: center;
  align-items: center;

  .iconInner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .icon1 {
    position: absolute;
    background: url("./assets/dizuo.png");
    background-size: 100% 100%;
    width: 259PX;
    height: 280PX;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 100PX;
  }
}

.info {
  position: absolute;
  width: 300PX;
  transform-style: preserve-3d;
  transform-origin: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  right: -92PX;
  bottom: 27PX;

  p {
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 25PX;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .number {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      font-family: AlimamaFangYuanTiVF;
      font-weight: normal;
      font-size: 16PX;
    }

    &.yellow, &.yellow :deep(.gsapNum) {
      color: #FFF000;
    }
  }

  :deep(.number) {
    .gsapNum {
      font-weight: normal;
      font-size: 30PX;
    }
  }
}

.css-output {
  position: fixed;
  bottom: 10PX;
  right: 10PX;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10PX;
  border-radius: 5PX;
  font-family: monospace;
  max-width: 400PX;
  overflow-wrap: break-word;

  h3 {
    margin-top: 0;
  }

  pre {
    white-space: pre-wrap;
  }
}
</style>

实例代码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础