当前位置: 首页 > news >正文

CSS空间转换

文章目录

    • 01-空间转换transform: translate3d()
      • 空间转换简介
      • 平移
      • 视距
      • 旋转 rotateXYZ()
      • 左手法则
      • 旋转rotate3d()
      • 立体呈现(transform-style)
      • 案例-3d导航
      • 案例筛子
      • 缩放
    • 02-动画animation
      • 动画实现步骤
      • 复合属性
      • 拆分写法animation-play-state()
      • 多组动画

01-空间转换transform: translate3d()

空间转换简介

  • 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同(垂直于电脑屏幕)。
  • 空间转换也叫 3D转换
  • 属性:transform

在这里插入图片描述

平移

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值与平面转换相同

默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果

/* 电脑是平面,默认无法观察 Z 轴平移效果 需要给父级添加视距(下一节)*/
transform: translate3d(100px, 200px, 300px);

视距

视距:人到电脑屏幕的距离

作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果

透视效果:近大远小、近实远虚

属性:(添加给父级,取值范围 800-1200)

perspective(代表下图的d): 视距;
transform: translateZ();代表啊Z

在这里插入图片描述

旋转 rotateXYZ()

  • Z 轴:rotateZ() :垂直于电脑屏幕,相当于竹蜻蜓,扇叶是xy轴的平面,竹柄垂直于屏幕。

    <style>
          .box {
            width: 300px;
            margin: 100px auto;
          }
    
          img {
            width: 300px;
            transition: all 2s;
          }
    
          .box img:hover {
            transform: rotateZ(360deg);
          }
        </style>
        <div class="box">
          <img src="./images/hero.jpeg" alt="" />
        </div>
    

在这里插入图片描述

  • X 轴:rotateX() 相当于竹蜻蜓,扇叶是xz轴的平面,竹柄是屏幕水平方向。

    <style>
          .box {
            width: 300px;
            margin: 100px auto;
          }
    
          img {
            width: 300px;
            transition: all 2s;
          }
    
          .box {
            /* 透视效果:近大远小,近实远虚 */
            perspective: 1000px;
          }
    
          .box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-60deg);
          }
        </style>
        <div class="box">
          <img src="./images/hero.jpeg" alt="" />
        </div>
    
  • Y 轴:rotateY() 相当于竹蜻蜓,扇叶是yz轴的平面,竹柄是屏幕垂直方向。

    <style>
          .box {
            width: 300px;
            margin: 100px auto;
          }
    
          img {
            width: 300px;
            transition: all 2s;
          }
    
          .box {
            /* 透视效果:近大远小,近实远虚 */
            perspective: 1000px;
          }
    
          .box img:hover {
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
          }
        </style>
        <div class="box">
          <img src="./images/hero.jpeg" alt="" />
        </div>
    

左手法则

作用:根据旋转方向确定取值正负

使用:左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

在这里插入图片描述

旋转rotate3d()

  • rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度,(四个参数全是必选参数)
  • x,y,z 取值为0-1之间的数字

立体呈现(transform-style)

作用:设置元素的子元素是位于 3D 空间中还是平面中

属性名:transform-style

属性值:

  • flat:子级处于平面中
  • preserve-3d:子级处于 3D 空间

案例-3d导航

在这里插入图片描述

案例步骤:

  1. 搭建立方体
    1. 绿色是立方体的前面
    2. 橙色是立方体的上面
  2. 鼠标悬停,立方体旋转

在这里插入图片描述

在这里插入图片描述

.nav li {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  transition: all 0.5s;

  transform-style: preserve-3d;

  /* 为了看到橙色和绿色的移动过程,给立方体添加旋转 */
  /* transform: rotateX(-20deg) rotateY(30deg); */
}

.nav li a {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/* 立方体每个面都有独立的坐标轴,互不影响 */
.nav li a:first-child {
  background-color: green;
  transform: translateZ(20px);
}

.nav li a:last-child {
  background-color: orange;
  transform: rotateX(90deg) translateZ(20px);
}

.nav li:hover {
  transform: rotateX(-90deg);
}

案例筛子

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

02-动画animation

  • 过渡:实现两个状态间的变化过程
  • 动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

动画实现步骤

  1. 定义动画
/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}
  1. 使用动画
animation: 动画名称 动画花费时长;

复合属性

在这里插入图片描述

提示:

  • 动画名称和动画时长必须赋值
  • 动画时长必须加单位否则无效
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

拆分写法animation-play-state()

在这里插入图片描述

<style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        /* linear:匀速 */
        animation: change 1s linear;

        /* steps:分步动画,工作中,配合精灵图实现精灵动画 */
        animation: change 1s steps(3);

        /* 如果有两个时间,第一个是动画时长,第二个是延迟时间 */
        animation: change 1s 2s;

        /* 重复次数,infinite:无限循环 */
        animation: change 1s 3;
        animation: change 1s infinite;

        /* alternate:反向 */
        animation: change 1s infinite alternate;

        /* 动画执行完毕时的状态, forwards:结束状态; backwards:开始状态(默认) */
        animation: change 1s forwards;
        animation: change 1s backwards;
      }
    
      .box:hover {
        /* 暂停动画 动画在谁身上,就给他的鼠标悬停伪类加animation-play-state: paused;*/
        animation-play-state: paused;
      }

      /* 宽度 从 200 变化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }

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

多组动画

animation: 
  动画一,
  动画二,
  ... ...
;
	<style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./bg.png);
      animation: 
        move 0.5s steps(12) infinite,
        run 3s linear forwards;
    }

    @keyframes move {
      from {
        background-position:url(./bg.png) 0 0;
      }

      to {
        background:url(./bg.png) -1680px 0;
      }
    }
    @keyframes run {
      from {
        transform: translate(0);
      }

      to {
        transform: translate(800px);
      }
    }
  </style>
  <div></div>
http://www.dtcms.com/a/122119.html

相关文章:

  • 第十四届蓝桥杯Scratch03月stema选拔赛真题——绘制彩虹
  • pycharm编译部署智能合约(solcx与web3搭配)
  • crossorigin是什么?【你了解前端的crossorigin吗?!】
  • mapbox基础,加载F4Map二维地图
  • Scala相关知识学习总结6
  • GPT-4o-image模型:开启AI图片编辑新时代
  • Windows Terminal 美化增强攻略 2.0:打造个性化高效开发环境(快捷键介绍、编程语言环境、starship美化、高效命令行工具)
  • TCP的三次握手和四次挥手
  • Visual Studio未能加载相应的Package包弹窗报错
  • HarmonyOS:使用geoLocationManager (位置服务)获取位置信息
  • ES6规范新特性总结
  • WebView2最低支持.NET frame4.5,win7系统
  • Linux基础IO(三)之访问文件的本质
  • GaussDB使用指南
  • FFmpeg安装和使用
  • # 基于BERT的文本分类
  • 龙蜥社区荣获 OS2ATC 2025 “最具影响力开源创新贡献奖”
  • spark数据清洗案例:流量统计
  • 力扣刷题-热题100题-第34题(c++、python)
  • 机器学习代码基础——ML2 使用梯度下降的线性回归
  • 暑假实习面试复盘
  • Vue框架的Diff算法
  • 使用Ollama通过预训练模型获取句子向量(rest api方式)
  • GDB调试程序的基本命令和用法(Qt程序为例)
  • 三月份面试感触
  • OpenCV链接库失败,报错 无法解析的外部符号
  • SCI科学论文的重要组成部分
  • 达梦数据库迁移问题总结
  • 如何进行数据安全风险评估总结
  • Frida 调用 kill 命令挂起恢复 Android 线程