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

news2024/9/23 17:13:28

文章目录

  • 一、空间转换
    • 1.1 空间位移
    • 1.2 透视
    • 1.3 空间旋转
    • 1.4 立体呈现
    • 1.5 3D导航
    • 1.6 空间缩放
  • 二、动画
    • 2.1 动画的实现步骤
    • 2.2 动画属性
  • 三、综合案例
    • 2.1 走马灯

一、空间转换

  • 空间：是从坐标轴角度定义的。 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/132226.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android实战进阶 - 拉取项目代码后多处报红？如资源找不到该如何处理？

Android实战进阶 - 拉取项目代码后多处报红？如资源找不到该如何处理？

近期参与了一个我很感兴趣的项目&#xff0c;项目内用到了很多新东西&#xff0c;例如组件化、模块化、ARouter路由、MVI框架、Kt高阶用法等等&#xff0c;感觉可以学一段时间… Gradle相关Blog Android Gradle - Gradle、Gradle plugin 基础认知Android Gradle - AndroidStud…
阅读更多...
函数极限定义的理解

函数极限定义的理解

回顾一下非正式的极限定义法。当x从任意一侧(自左向右或自右向左)接近常量 c时&#xff0c;如果f(x)变得任意接近一个单独的值L, 则当x接近c时f(x)的极限值是L, 写作 咋一看&#xff0c;这个定义似乎非常技术化。即使这样&#xff0c;它仍然是非正式的&#xff0c;因为它没有给…
阅读更多...
三、Django -视图

三、Django -视图

Django 提示&#xff1a;本文根据b站黑马python课整理 链接指引 > 黑马程序员python企业级开发项目-手把手从0到1开发《美多商城》 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录Django视图介绍和项目准备视图…
阅读更多...
【数据集6】全球人工不透水面积GAIA（清华数据）

【数据集6】全球人工不透水面积GAIA（清华数据）

全球人工不透水面积&#xff08;lobal artificial impervious area, GAIA&#xff09; 人工不透水区是表征建成区和城市范围的重要覆盖类型&#xff0c;特别是在较细的空间分辨率下。 1 简介 原理&#xff1a; 由Landsat卫星图像和辅助数据集生成&#xff0c;如夜间灯光数据…
阅读更多...
健康码识别[QT+OpenCV]

健康码识别[QT+OpenCV]

&#x1f482; 个人主页:风间琉璃&#x1f91f; 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦目录 一、识别原理 1.二维码定位 2.颜色识别 二、部分源码 一、识别原理 二维…
阅读更多...
matlab实现基本相位调制

matlab实现基本相位调制

相位调制&#xff08;PM&#xff09;是将信息编码为载波的瞬时相位变化的一种调制模式。 调相的基本表达式如下&#xff1b; 载波c(t)是一个标准正弦信号&#xff1b;m(t)是调制信号&#xff1b;调制以后是把m(t)的变化附加到了载波的相位变化上&#xff1b; 调相的基本示意如…
阅读更多...
WPF中iconfont图标库的使用

WPF中iconfont图标库的使用

总目录 文章目录总目录前言一、查找项目需要的图标二、图标的使用1.将下载的文件解压缩2.将ttf文件复制粘贴到自己的项目中3.使用总结前言 本文主要介绍在WPF中iconfont图标库的使用 一、查找项目需要的图标 首先进入阿里巴巴矢量图标库网站&#xff0c;登录自己的账号&#…
阅读更多...
MySQL快速生成大量测试数据 （脚本一键生成分表数据）

MySQL快速生成大量测试数据 （脚本一键生成分表数据）

生成128个分表的测试数据敲到手累&#xff1b; 生成的测试数据虽然有离散分布&#xff0c;但随着时间的增长数据量不增反降&#xff0c;不符合大多数线上业务的增长趋势&#xff1b; 生成的测试数据部分超过当前日期。 具体表现如下图所示&#xff1a; 我们直接看下脚本的用法…
阅读更多...
月入8000+的steam/csgo搬砖项目（详细拆解）

月入8000+的steam/csgo搬砖项目（详细拆解）

大家好&#xff0c;我是阿阳 今天就给大家带来一个在steam游戏搬砖项目的拆解&#xff0c;目前这个项目我们团队也一直在带队实操&#xff0c;已经跑通了项目的整个流程&#xff0c;提炼出了完整的赚钱体系。 先给大家看看近期的收益情况&#xff1a; 近期的出售记录&#xf…
阅读更多...
[ Azure - Database ] Azure Database for MySQL 配置Auditing并查看使用

[ Azure - Database ] Azure Database for MySQL 配置Auditing并查看使用

传统MySQL的二进制日志binlog可以说是MySQL最重要的日志&#xff0c;它记录了所有的DDL和DML语句&#xff08;除了数据查询语句select&#xff09;&#xff0c;以事件形式记录&#xff0c;还包含语句所执行的消耗的时间。本文会讲解微软云Azure Database for MySQL的binlog相关…
阅读更多...
i.MX8MP平台开发分享（IOMUX篇）- 硬件原理

i.MX8MP平台开发分享（IOMUX篇）- 硬件原理

专栏目录&#xff1a;专栏目录传送门 平台内核i.MX8MP5.15.71文章目录1.前言2.IOMUX原理3. 寄存器实例&#xff1a;UART1_RX3.1 PAD: UART1_RXD3.2 PAD: SD1_CMD3.3 PAD: SAI2_RXC3.4 Input select3.5 功能实现4.SION1.前言 我们都知道&#xff0c;芯片包含数量有限的引脚&am…
阅读更多...
BeanFactory和Applicationcontext实现

BeanFactory和Applicationcontext实现

1.容器接口 1.BeanFactory能做哪些事 1.什么是beanFactory 它是spring的核心容器 是ApplicationContext的父接口 ApplicationContext扩展实现都【组合了】beanFactory 2.BeanFactory的功能 明面上只有getBean()方法实际上控制反转、依赖注入、bean生命周期的各种功能都…
阅读更多...
tslib-1.4在I.MX6ULL开发板上电容屏不能触摸问题

tslib-1.4在I.MX6ULL开发板上电容屏不能触摸问题

一、前言 在采用触摸屏的移动终端中&#xff0c;触摸屏性能的调试是个重要问题之一&#xff0c;因为电磁噪声的缘故&#xff0c;触摸屏容易存在点击不准确、有抖动等问题。Tslib是一个开源的程序&#xff0c;能够为触摸屏驱动获得的采样提供诸如滤波、去抖、校准等功能&#x…
阅读更多...
ESP32-S3 ＞＞＞ MicroPython 编程初探

ESP32-S3 ＞＞＞ MicroPython 编程初探

今天买了一个ESP32-S3&#xff0c;打算试试在这上面进行MicroPython的编程&#xff08;附资料网址&#xff09;。 首先为了在ESP32上进行mp的编程&#xff0c;需要对其重新烧录固件。这就需要我们电脑安装好CH343驱动&#xff0c;然后找到适用于ESP32-S3的固件&#xff0c;利用…
阅读更多...
Diffusion详解及PyTorch代码

Diffusion详解及PyTorch代码

首先附上几个大佬的讲解 lilianweng-diffusion-models 这篇博客借鉴了上述博客和视频&#xff0c;同时加上个人的理解整合了一下&#xff0c;整个推导过程非常详细&#xff0c;希望能使每个人都看懂 结合之前讲过的VAE和GAN模型&#xff0c;Diffusion Model和他们的区别就是…
阅读更多...
Apache Struts2远程代码执行漏洞(S2-015)复现及修复方案

Apache Struts2远程代码执行漏洞(S2-015)复现及修复方案

Apache Struts2远程代码执行漏洞(S2-015)介绍 Apache Struts 2是用于开发JavaEE Web应用程序的开源Web应用框架。Apache Struts 2.0.0至2.3.14.2版本中存在远程命令执行漏洞。远程攻击者可借助带有‘${}’和‘%{}’序列值&#xff08;可导致判断OGNL代码两次&#xff09;的请求…
阅读更多...
LabVIEW​​共享​变量生命周期

LabVIEW​​共享​变量生命周期

LabVIEW​​共享​变量生命周期 共享​变量​生命​周期 ​所有​共享​变量​都是​项目​库​的​一部分。​SVE​将会​注册​项目​库​和​库​中​包含​的​共享​变量​&#xff08;当​LabVIEW​需要​调​用​其中​某​个​变量​时&#xff09;​。​默认​情况​…
阅读更多...
AlphaGo简易版MuGo源码解析

AlphaGo简易版MuGo源码解析

文章目录前言源码实现MuGo的输入数据模型的搭建模型的训练参考链接结语前言 自从AlphaGo横空出世&#xff0c;战胜李世石后&#xff0c;AI围棋如雨后春笋一般遍地开花。阅读DeepMind的论文有时还是隔靴搔痒&#xff0c;只有钻到代码里&#xff0c;才能一探究竟。于是&#xff…
阅读更多...
Arthas诊断追踪性能案例

Arthas诊断追踪性能案例

文章目录1、什么是Arthas2、安装启动3、追踪流程背景&#xff1a;本次案例使用Windows操作系统进行本地环境演示&#xff08;生产环境Linux同理&#xff09; 案例&#xff1a;查询接口性能特别慢&#xff0c;通过Arthas追踪诊断链路中哪个步骤导致性能如此之慢 注意&#xff1a…
阅读更多...
code review的思考和实践

code review的思考和实践

使用方式 1.看名称效果图&#xff0c;有没有和自己想要的效果类似的 2.有的话&#xff0c;复制粘贴代码使用 3.也可以自己修改一下 4.css效果并不是特别难&#xff0c;只是有时候我们可能想不到 5.笔者空闲时间&#xff0c;会继续更新的哦&#xff0c;点赞关注不迷路**^_^** …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023