移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】

最新推荐文章于 2025-08-18 21:53:02 发布
最新推荐文章于 2025-08-18 21:53:02 发布
阅读量478 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： 前端 3d css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_52896752/article/details/128509016
文章详细介绍了CSS3中的3D空间转换，包括位移、透视、旋转以及如何创建立体效果。同时，讲解了动画的实现步骤和相关属性，以及如何应用到走马灯效果中，提供了多个实例来展示这些技术的实际应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、空间转换

  • 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
  • 空间转换也叫3D转换
  • 属性：transform在这里插入图片描述

1.1 空间位移

  • 语法
    • transform: translate3d(x, y, z);
    • transform: translateX(值);
    • transform: translateY(值);
    • transform: translateZ(值);
  • 取值（正负均可）
    • 像素单位数值
    • 百分比
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
    }

1.2 透视

  • 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

    • 答：近大远小、近清楚远模糊

  • 思考：默认情况下，为什么无法观察到Z轴位移效果？

    • 答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

  • 属性（添加给父级）

    • perspective: 值;
    • 取值：像素单位数值， 数值一般在800 – 1200。

  • 作用

    • 空间转换时，为元素添加近大远小、近实远虚的视觉效果

  • 属性（添加给父级）

    • perspective: 值;
    • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。在这里插入图片描述
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

1.3 空间旋转

  • 语法

    • transform: rotateZ(值);
    • transform: rotateX(值);
    • transform: rotateY(值);

  • 左手法则

    • 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向在这里插入图片描述

  • 拓展

    • rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
    • x，y，z 取值为0-1之间的数字
    <title>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
  • 思考：使用perspective透视属性能否呈现立体图形？
  • 答：不能，perspective只增加近大远小、近实远虚的视觉效果。
  • 实现方法
    • 添加 transform-style: preserve-3d;
    • 使子元素处于真正的3d空间

1.4 立体呈现

  • 呈现立体图形步骤
      1. 盒子父元素添加transform-style: preserve-3d；
      1. 按需求设置子盒子的位置（位移或旋转）
  • 注意
    • 空间内，转换元素都有自已独立的坐标轴，互不干扰在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

1.5 3D导航

  • 观察：绿色和橙色盒子是如何摆放的？在这里插入图片描述

思考：绿色和橙色盒子是如何摆放的？

  • 搭建立方体
    • 绿色盒子是立方体的前面
    • 橙色盒子是立方体的上面在这里插入图片描述

结论： 绿色和橙色部分共需要3个标签

  • 1个父级标签
  • 绿色和橙色共2个标签（子级）

实现思路

    1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
    1. 添加hover状态旋转切换效果

实现思路

    1. 搭建立方体
    • li标签
      • 添加立体呈现属性transform-style: preserve-3d;
      • 添加旋转属性（为了便于观察效果，案例完成后删除即可）
    • a标签
      • 调节位置

实现思路

    1. 搭建立方体
    • 调节a标签的位置
      • a标签定位（子绝父相）
      • 英文部分添加旋转和位移样式
      • 中文部分添加位移样式在这里插入图片描述

实现思路

    1. 过渡效果
    • 鼠标滑过li， 添加空间旋转样式
    • li添加过渡属性
      注意： 案例完成后，删除li的旋转样式。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

1.6 空间缩放

  • 语法
    • transform: scaleX(倍数);
    • transform: scaleY(倍数);
    • transform: scaleZ(倍数);
    • transform: scale3d(x, y, z);

二、动画

2.1 动画的实现步骤

目标：使用animation添加动画效果
实现步骤：

    1. 定义动画在这里插入图片描述

  • . 使用动画在这里插入图片描述

2.2 动画属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* animation: change 1s linear; */

            /* 分步动画 */

            /* 3: 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */

            /* 无限循环 */
            /* animation: change 1s infinite alternate; */

            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */

            /* 动画停留在结束状态 */
            animation: change 1s forwards;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意：

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
    在这里插入图片描述

目标：使用steps实现逐帧动画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation拆分写法</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;            
        }
        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

目标：使用steps实现逐帧动画

  • 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
  • animation-timing-function: steps(N)；
    • 将动画过程等分成N份
  • 精灵动画制作步骤
    • 准备显示区域
      • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
    • 定义动画
      • 改变背景图的位置（移动的距离就是精灵图的宽度）
    • 使用动画
      • 添加速度曲线steps(N)，N与精灵图上小图个数相同
      • 添加无限重复效果在这里插入图片描述

目标：能够使用animation属性给一个元素添加多个动画效果

  • 多组动画
  • 思考：如果想让小人跑远一些，该如何实现？
    • 答：精灵动画的同时添加盒子位移动画。在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

      /* 12: 净零小图的个数 */
      animation: 
        move 1s steps(12) infinite,
        run 1s forwards
      ;
    }

    @keyframes move {
        /* from {
          background-position: 0 0;
        } */
        to {
          /* 1680: 精灵图的宽度 */
          background-position:  -1680px 0;
        }
    }

    /* 定义一个盒子移动的动画  800px */
    @keyframes run {
      /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
      /* from {
        transform: translateX(0);
      } */
      to {
        transform: translateX(800px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

三、综合案例

2.1 走马灯

目标：使用animation实现逐帧图片位移效果
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        width: 2000px;
        animation: move 5s infinite linear;
      }

      .box li {
        float: left;
      }

      /* 定义动画:位移, ul 左侧使用  x -1400  */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      /* 用户鼠标移入box,动画暂停 */
      .box:hover ul {
        animation-play-state: paused;
      }
      
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>

        <!-- 第567移动的时候,显示区域不能留白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>
day17 - CSS3过渡、动画、3D
u010544438的博客
08-09 23
CSS过渡与动画技术详解 摘要：本文系统介绍了CSS过渡和动画的实现方法。过渡（transition）通过transition-property、duration、timing-function等属性实现元素样式平滑变化，支持单个或多个属性同时过渡。动画（animation）利用@keyframes定义关键帧，配合animation-name、duration等属性创建复杂动画效果。3D变换部分讲解了transform-style、perspective等属性，以及位移、旋转、缩放等3D操作。通过立方体、翻
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局
qq_48687155的博客
07-28 438
移动Web网页开发：2D&3D转换与动画、移动端布局、响应式布局
移动Web(一)
weixin_52047874的博客
03-17 1131
承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；完成移动端和多端适配效果
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7207
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
【Web前端学习之路】web进阶（移动web） 黑马课程笔记
a123456_9的博客
04-29 398
1、字体图标库 Iconfont网站上下载字体图标，直接引入样式 如果图库中没有想要的图标，则可以自己上传 2、平移转换 （可以对标回忆一下基础班的“过渡”属性：transition） 平面转换属性（位移、旋转、缩放）：transform 若x的值为负数，则向左移动；y的值为负数，则向上移动（可以记忆成margin left） translate（x， y）； 位移-绝对定位居中 使用translate快速实现绝对定位的元素居中 双开门效果示例 ..
从0开始的中后台管理系统-7（项目完结主题切换）
A6516565189的博客
08-17 179
本文介绍了前端项目实现主题切换功能的完整方案。首先在状态管理(resso)中设置isDark变量并实现持久化存储，通过Switch组件切换时动态修改HTML的class。CSS中使用CSS变量(--dark-color等)实现样式切换，同时通过ConfigProvider配置antd组件的主题算法(theme.darkAlgorithm/defaultAlgorithm)来实现组件库的主题适配。方案包含HTML元素样式切换、CSS变量应用和antd组件主题配置三个关键部分，最终实现了包括基础元素和UI组件在
Started TttttApplication in 0.257 seconds (没有 Web 依赖导致 JVM 正常退出)
舒一笑的博客
08-17 855
【摘要】Spring Boot应用启动后立即退出的问题分析：日志显示应用成功启动但无Web容器运行痕迹，主线程结束后JVM退出（exit code 0）。根本原因是项目缺少spring-boot-starter-web依赖，导致未启动内嵌服务器。解决方案：1）添加Web依赖构建HTTP服务；2）非Web应用可通过CommandLineRunner维持运行或显式阻塞主线程。该现象属于预期行为而非异常，选择对应方案后问题解决（附成功运行截图）。
前端Element-plus的选择器 el-select 清空内容时，后端对应的更新方式，支持更新为null
BillKu的博客
08-18 89
后端处理：spring boot + mybatis。
JavaScript基础语法three
2301_79744908的博客
08-18 99
数组名.push(新增的内容)，追加到数组末尾，返回数组新长度。数组名.pop(),删除数组最后一个元素，并返回该元素的值。数组名.unshift(新增的内容)，追加到数组开头。数组名.splice(操作的下标,删除的个数)for(变量起始值;数组名.shift()，删除数组第一个元素。数组：是一种可以按顺序保存数据的数据类型。修改:数组[下标]=新值。综合案例：生成数据柱状图。案例：打印九九乘法表。
HTML 框架：构建网页布局的基石
froginwe11的博客
08-16 392
HTML 框架是一种网页布局技术，它允许开发者将网页划分为多个区域，并对这些区域进行精细的控制。通过使用框架，可以轻松实现网页的标题、导航栏、页脚等部分的布局，提高网页的可用性和用户体验。HTML 框架是网页设计中不可或缺的一部分，它为网页布局提供了强大的支持。通过了解 HTML 框架的种类、应用以及如何使用它们，开发者可以创建更加美观、易用的网页。
面试题：react如何实现keep-alive功能
m0_47999208的博客
08-18 251
场景推荐方案优势非路由组件（如标签）父组件状态缓存简单直观，无需额外依赖路由组件（简单需求）React Router + 自定义缓存容器灵活控制缓存逻辑，无第三方依赖路由组件（复杂需求）第三方库成熟稳定，支持钩子、手动清缓存等功能注意：缓存组件会占用内存，需避免缓存过多组件；若组件依赖外部数据（如接口），需在 “激活” 时重新校验数据有效性（如通过onActivate钩子刷新）。
【运维进阶】部署文件到受管主机
最新发布
weixin_74491577的博客
08-18 387
实验摘要 本实验演示了如何使用Ansible的Files模块库管理远程主机文件。主要包括file模块创建文件并设置权限属性，lineinfile模块确保文件中存在特定行或在指定位置插入内容，以及replace模块基于正则表达式替换文件内容。实验在node1节点上成功创建了/tmp/testfile文件，演示了修改权限、添加内容和替换文本等操作，验证了Ansible对远程文件的高效管理能力。通过playbook.yml文件定义任务，实现了自动化文件部署和修改。
像素风球球大作战 HTML 游戏
2501_92856799的博客
08-18 295
HTML像素风球球大作战游戏摘要 这是一个基于HTML5 Canvas的像素风格球球大作战游戏。玩家控制一个绿色球体，通过鼠标移动来吃掉彩色小点以增大体积，同时需要避开更大的敌人球体。游戏包含以下核心功能： 像素风格界面：使用CSS的image-rendering: pixelated实现经典像素效果 游戏机制： 玩家球体随鼠标移动，速度与体积成反比 吃掉小点增加分数和体积 随机生成的敌人球体会自动移动 UI元素： 开始界面和游戏说明 实时显示分数和体积 简单的碰撞检测系统 游戏采用纯前端技术实现，适合在浏
E2B是一个开源基础设施，允许您在云中安全隔离的沙盒中运行AI生成的代码和e2b.dev网站
skywalk8163的专栏
08-17 879
E2B是一个开源的云沙盒服务，允许在隔离环境中运行AI生成的代码。开发者需通过e2b.dev网站注册获取API key，并安装JavaScript或Python SDK来使用该服务。主要竞品包括CodeSandbox（侧重前端开发协作）和Replit（支持多语言在线编程）。E2B的核心优势在于为AI代码提供安全的执行环境，但需依赖其云端服务而非自建。使用示例展示了通过SDK在沙盒中运行简单Python代码的过程。
Android 移动端 UI 设计：前端常用设计原则总结
weixin_46560512的博客
08-16 949
在 Android 移动端开发中，优秀的 UI 设计不仅需要视觉上的美观，更需要符合用户习惯、提升操作效率的设计逻辑。前端 UI 设计原则是指导开发者将功能需求转化为优质用户体验的核心准则，这些原则贯穿于布局结构、交互反馈、视觉呈现等各个环节。以下从用户体验、视觉统一性、交互逻辑性、适配兼容性四个维度，总结 Android 移动端前端 UI 设计的常用原则。
学习链接。
weixin_49035434的博客
08-18 243
hello 算法 0.2 如何使用本书 - Hello 算法代码随想录: 代码随想录被删的前端游乐场 被删的前端游乐场Github漫游指南 : Github ebookJaveScript源码: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js世峰的刷题网站: labuladong 的算法笔记 | labuladong 的算法笔记编程导航: 编程导航 - 程序员一站式编程学习交流社
React 基础实战：从组件到案例全解析
热爱音乐和二次元！
08-17 767
本专栏通过6个实战案例系统讲解React核心概念，包括组件传参、数组渲染、父子组件协作、状态管理等。第一篇展示如何通过Props传递对象参数渲染猫的信息卡片；第二篇对比两种商品列表渲染方案；第三篇演示父子组件配合实现科目成绩列表。每篇提供完整代码，强调React单向数据流、Props只读性、组件拆分原则等核心知识点，帮助初学者掌握基础开发逻辑。专栏采用渐进式教学，从简单组件到综合案例，适合React新手巩固基础。
Tauri 框架介绍
mmhh1024的博客
08-17 539
Tauri是一款轻量级跨平台桌面应用开发框架，结合前端技术（HTML/CSS/JS）与Rust后端，可生成Windows/macOS/Linux原生应用。其核心优势包括：体积小（仅几MB）、内存占用低、利用系统WebView渲染界面，以及通过Rust实现安全高效的本地功能调用。相比Electron，Tauri应用更轻量化且安全性更优，适合开发工具类、数据展示等对性能有要求的桌面软件。开发流程简单，支持主流前端框架，提供系统集成、自动更新等功能，是追求性能与安全的轻量级桌面应用理想选择。
【Python】一些PEP提案（六）：元类、默认 UTF-8、Web 开发
矢车菊二十七号
08-15 1043
摘要：本文介绍了Python中的元类(metaclass)和WSGI接口两个重要概念。元类是控制类创建的类，通过继承type并重写__new__或__init__方法实现，常用于单例模式等场景。Python 3默认使用UTF-8编码源代码，无需显式声明。WSGI是Python Web应用的服务器与框架接口标准，允许不同框架(Gunicorn、uWSGI等)与服务器(Flask、Django等)互相配合。文章通过示例代码展示了如何实现简单的WSGI应用和使用Flask框架。建议在生产环境中使用更现代的异步框架
移动Web空间转换与动画技巧详解
移动Web空间转换与动画是现代网页设计中不可或缺的组成部分，尤其在响应式设计和提升用户体验方面具有重要意义。本篇文章将深入探讨这两个关键知识点。 首先，空间转换，也被称为三维转换，是通过CSS `transform` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值