css3文字环绕旋转

Fighting_p2023-11-11 11:40

目录

固定数量文字环绕旋转

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>

效果图

相关推荐
半句唐诗25 分钟前
我是如何通过 Access Token 成功发布第一个 npm 包的
前端·npm·node.js
程序员黑豆29 分钟前
鸿蒙应用开发：@Provider 与 @Consumer 跨组件双向同步详解
前端·harmonyos
paopaokaka_luck34 分钟前
基于springboot3+vue3的智能文库平台（AI智能搜索、AI智能汇总、实时在线状态展示、多格式文档预览与富文本编辑、Echarts图形化分析）
前端·网络·spring boot·网络协议·echarts
牧艺1 小时前
cos-design PhotoAlbum：用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计
洪贺1 小时前
从原始采样到可缩放心电图：用 h5ECG 绘制自己的 ECG
前端
冰心孤城1 小时前
Excel: xls与xlsx格式转换排坑指南
java·前端·excel
程序员黑豆1 小时前
鸿蒙应用开发之跨组件传参：@Provide 与 @Consume 跨层级数据同步详解
前端·harmonyos
C++、Java和Python的菜鸟3 小时前
第9章 后端Web进阶（AOP）
java·开发语言·前端
我星期八休息3 小时前
扩展— TCP 全连接队列与 tcpdump 抓包
linux·服务器·开发语言·前端·网络·tcp/ip·tcpdump
AC赳赳老秦4 小时前
CSDN 技术社区数据采集：OpenClaw 抓取公开技术热帖，生成领域技术热点周报
java·大数据·前端·数据库·python·php·openclaw
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07AI科技热点日报 | 2026年07月01日082026上半年大模型全景技术解读：推理融合、Agent 爆发与多模态统一092026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？102026 年 AI 大模型 & AI 编程工具实战全总结