css3文字环绕旋转

目录

固定数量文字环绕旋转

html 复制代码
<!-- 文字旋转测试 -->
<template>
  <div class="page">
    <div>
      <div v-for="(item, index) in [...Array(20).keys()]" :key="index" style="color: red">
        ^_^红红火火恍恍惚惚
      </div>
    </div>
    <div class="father">
      <span class="text">盒子1</span>
      <span class="text">盒子2</span>
      <span class="text">盒子3</span>
      <span class="text">盒子4</span>
      <span class="text">盒子5</span>
      <span class="text">盒子6</span>

      <!-- <span class="text"><i>盒子1</i></span>
      <span class="text"><i>盒子2</i></span>
      <span class="text"><i>盒子3</i></span>
      <span class="text"><i>盒子4</i></span>
      <span class="text"><i>盒子5</i></span>
      <span class="text"><i>盒子6</i></span> -->

      <!-- <span class="text"><b>盒子1</b><strong>盒子1</strong><span></span><i>测试1</i></span>
      <span class="text"><b>盒子2</b><strong>盒子2</strong><span></span><i>测试2</i></span>
      <span class="text"><b>盒子3</b><strong>盒子3</strong><span></span><i>测试3</i></span>
      <span class="text"><b>盒子4</b><strong>盒子4</strong><span></span><i>测试4</i></span>
      <span class="text"><b>盒子5</b><strong>盒子5</strong><span></span><i>测试5</i></span>
      <span class="text"><b>盒子6</b><strong>盒子6</strong><span></span><i>测试6</i></span> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextRotate',
  components: {},

  data() {
    return {
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style lang='scss' scoped>
.page {
  perspective: 700px;
  .father {
    width: 50%;
    margin: 50px auto;
    background-color: tomato;

    // 动画
    position: relative;
    transform-style: preserve-3d;
    // 添加动画
    animation: rotate 10s linear infinite;

    &:hover {
      // 鼠标悬浮动画停止
      animation-play-state: paused;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

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

    .text {
      background-color: green;

      // 动画
      position: absolute;
      top: 0;
      left: 50%;

      // b {
      //   color: transparent;
      // }

      // strong {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   z-index: 1;
      //   color: red;
      // }
      // span {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background-color: pink;
      // }

      // i {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   transform: rotateY(180deg);
      //   z-index: -1;
      //   color: green;
      // }

      &:nth-of-type(1) {
        // 【问题】为什么是Z轴移动?
        // 【解答】盒子Y轴旋转60deg后。他的z轴也跟着转了
        // transform: rotateY(0deg) translateZ(300px);
        transform: translateX(-50%) rotateY(0deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: red;
      }

      &:nth-of-type(2) {
        // 先旋转 再移动
        // transform: rotateY(60deg) translateZ(300px);
        transform: translateX(-50%) rotateY(60deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: orange;
      }

      &:nth-of-type(3) {
        // 先旋转 再移动
        // transform: rotateY(120deg) translateZ(300px);
        transform: translateX(-50%) rotateY(120deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: yellow;
      }

      &:nth-of-type(4) {
        // 先旋转 再移动
        // transform: rotateY(180deg) translateZ(300px);
        transform: translateX(-50%) rotateY(180deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: green;
      }

      &:nth-of-type(5) {
        // 先旋转 再移动
        // transform: rotateY(240deg) translateZ(300px);
        transform: translateX(-50%) rotateY(240deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: blue;
      }

      &:nth-of-type(6) {
        // 先旋转 再移动
        // transform: rotateY(300deg) translateZ(300px);
        transform: translateX(-50%) rotateY(300deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: purple;
      }
    }
  }
}
</style>

不固定数量文字环绕旋转

html 复制代码
<!-- 文字旋转测试 -->
<template>
  <div class="page">
    <div>
      <div v-for="(item, index) in [...Array(20).keys()]" :key="index" style="color: red">
        ^_^红红火火恍恍惚惚
      </div>
    </div>
    <div class="father">
      我是father
      <span
        v-for="(item, index) in [...Array(count).keys()]"
        :key="index"
        class="text"
        :style="`transform: translateX(-50%) rotateY(${
          (360 / count) * index
        }deg) translateZ(300px)`"
      >
        盒子{{ item + 1 }}
      </span>
      <!-- <span class="text">盒子2</span>
      <span class="text">盒子3</span>
      <span class="text">盒子4</span>
      <span class="text">盒子5</span>
      <span class="text">盒子6</span> -->

      <!-- <span class="text"><i>盒子1</i></span>
      <span class="text"><i>盒子2</i></span>
      <span class="text"><i>盒子3</i></span>
      <span class="text"><i>盒子4</i></span>
      <span class="text"><i>盒子5</i></span>
      <span class="text"><i>盒子6</i></span> -->

      <!-- <span class="text"><b>盒子1</b><strong>盒子1</strong><span></span><i>测试1</i></span>
      <span class="text"><b>盒子2</b><strong>盒子2</strong><span></span><i>测试2</i></span>
      <span class="text"><b>盒子3</b><strong>盒子3</strong><span></span><i>测试3</i></span>
      <span class="text"><b>盒子4</b><strong>盒子4</strong><span></span><i>测试4</i></span>
      <span class="text"><b>盒子5</b><strong>盒子5</strong><span></span><i>测试5</i></span>
      <span class="text"><b>盒子6</b><strong>盒子6</strong><span></span><i>测试6</i></span> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextRotate',
  components: {},

  data() {
    return {
      count: 10 // 文字条数
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style lang='scss' scoped>
.page {
  perspective: 700px;
  .father {
    // display: inline-block; // .father 内没有内容/内容过少(即宽度小)的话:由于 .text 的宽度和 .father 宽度一样,会导致 .text 中文字换行
    width: 50%;
    margin: 50px auto;
    background-color: tomato;

    // 动画
    position: relative;
    transform-style: preserve-3d;
    // 添加动画
    animation: rotate 10s linear infinite;

    &:hover {
      // 鼠标悬浮动画停止
      animation-play-state: paused;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

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

    .text {
      background-color: green;

      // 动画
      position: absolute;
      top: 0;
      left: 50%;

      // b {
      //   color: transparent;
      // }

      // strong {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   z-index: 1;
      //   color: red;
      // }
      // span {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background-color: pink;
      // }

      // i {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   transform: rotateY(180deg);
      //   z-index: -1;
      //   color: green;
      // }

      &:nth-of-type(1) {
        // 【问题】为什么是Z轴移动?
        // 【解答】盒子Y轴旋转60deg后。他的z轴也跟着转了
        // transform: rotateY(0deg) translateZ(300px);
        transform: translateX(-50%) rotateY(0deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: red;
      }

      &:nth-of-type(2) {
        // 先旋转 再移动
        // transform: rotateY(60deg) translateZ(300px);
        transform: translateX(-50%) rotateY(60deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: orange;
      }

      &:nth-of-type(3) {
        // 先旋转 再移动
        // transform: rotateY(120deg) translateZ(300px);
        transform: translateX(-50%) rotateY(120deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: yellow;
      }

      &:nth-of-type(4) {
        // 先旋转 再移动
        // transform: rotateY(180deg) translateZ(300px);
        transform: translateX(-50%) rotateY(180deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: green;
      }

      &:nth-of-type(5) {
        // 先旋转 再移动
        // transform: rotateY(240deg) translateZ(300px);
        transform: translateX(-50%) rotateY(240deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: blue;
      }

      &:nth-of-type(6) {
        // 先旋转 再移动
        // transform: rotateY(300deg) translateZ(300px);
        transform: translateX(-50%) rotateY(300deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: purple;
      }
    }
  }
}
</style>

效果图

相关推荐
汪子熙2 分钟前
web 应用本地开发中的 LiveReload 协议深度解析
前端·javascript
UI设计和前端开发从业者4 分钟前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
全宝17 分钟前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子30 分钟前
Web缓存:原理、策略与优化
前端·面试
小磊哥er33 分钟前
【前端工程化】前端工作中如何协同管理开发任务?
前端
程序员小白条37 分钟前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全38 分钟前
2025年前端面试题
前端
萌萌哒草头将军1 小时前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang8 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing8 小时前
前端实习总结——案例与大纲
前端·javascript