CSS 空间转换 动画

目录

  • 1. 空间转换
    • 1.1 视距 - perspective
    • 1.2 空间转换 - 旋转
    • 1.3 立体呈现 - transform-style
    • 1.4 空间转换 - 缩放
  • 2. 动画 - animation
    • 2.1 动画的基本用法
    • 2.1 animation 复合属性
    • 2.2 animation 拆分属性
    • 2.3 多组动画

正文开始

1. 空间转换

空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴正方向是垂直页面向外的方向。空间转换又叫 3D转换。

属性：

<style>
	transform: translate3d(x,y,z);
	transform: translateX();
	transform: translateY();
	transform: translateZ();
</style>

取值：

  • 像素单位数值
  • 百分比（以盒子自身尺寸为参照）

例如：

<!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>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
        margin: 100px auto;
        transition: all 0.5s;
    }
    div:hover {
        transform: translate3d(100px,200px,200px);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

需要注意的是，默认情况下，Z 轴上的变化是无法生效的，因为屏幕是二维的，并不能显示 Z 轴的效果，观察 Z 轴变化的通过设置视距的方式来实现

1.1 视距 - perspective

作用：指定了观察者与 Z=0 平面的距离，为元素添加近大远小的透视效果。

属性：添加给直接父级，取值范围800-1200效果最佳

perspective: 视距;

例如：

<!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>
        .father {
            perspective: 1000px;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        .son:hover {
            transform: translateZ(200px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>    
    </div>
</body>
</html>

1.2 空间转换 - 旋转

作用：设置对象以指定坐标轴为轴旋转，配合视距属性可使空间转换更为真实

属性：

<style>
	/* 绕 Z 轴转 */
	transform: rotateZ(转动角度);
	/* 绕 X 轴转 */
	transform: rotateX(转动角度);
	/* 绕 Y 轴转 */
	transform: rotateY(转动角度);
	/* 自定义旋转轴位置 */
	transform: rotate3d(x,y,z,角度度数)
</style>

transform:rotate3d(x,y,z,角度度数):

  • x,y,z 取值为0-1之间的数字
  • 根据 x,y,z 的值会自动生成一个新的旋转轴，指定盒子会绕着这个轴旋转指定角度

左手法则：用以根据旋转方向确定取值正负。
-左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向：
在这里插入图片描述
例如：

<!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>
        .father {
            perspective: 1000px;
            width: 500px;
            margin: 100px auto;
        }
        img {
            width: 500px;
            transition: all 0.5s;
        }
        .father img {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="img.jpg" alt=" ">    
    </div>
</body>
</html>

页面效果：
在这里插入图片描述

1.3 立体呈现 - transform-style

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

属性：

<style>
	/* 子集处于平面中 */
	transform-style:flat;
	/* 子集处于 3D 空间 */
	transform-style:preserve-3d;
</style>

呈现立体图形步骤：

  1. 父级元素添加 transform-style:preserve-3d;
  2. 子集定位，使所有子集都在盒子内部
  3. 调整子盒子的位置
    请添加图片描述
    例如：

<!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>
        .box {
            /* 给父级盒子添加 3D 属性 */
            margin: 100px auto;
            width: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: all .5s;
            perspective: 1000px;
        }
        .box div {
            /* 子集定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .back {
            transform: translateZ(-100px);
            background-color: red;
        }
        .front {
            transform: translateZ(100px);
            background-color: green;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="back">后面</div>
        <div class="front">前面</div>
    </div>
</body>
</html>

页面效果：
请添加图片描述
静态的图片很难展示出动态的效果，所以大家可以试着自己运行一下来看看动画效果。

需要注意的是，当盒子在空间中转换的时候，他的坐标轴也会随之改变。

1.4 空间转换 - 缩放

作用：在空间中缩放指定对象。

属性：

<style>
	transform: scale3d(x,y,z);
	transform: scaleX();
	transform: scaleY();
	transform: scaleZ();
</style>

属性值：

  • 属性值为具体数值，即缩放倍数，小于1缩小，大于1放大。

2. 动画 - animation

  • 过渡：实现两个状态间的变化过程
  • 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

2.1 动画的基本用法

动画实现步骤：

  1. 定义动画：有两种写法
<style>
	/* 只有初始和末尾状态 */
	@keyframes 动画名称1 {
		from {状态1}
		to {状态2}
	}
	/* 将整个动画过程分为若干部分 */
	/* 百分比表示占动画时长的百分比 */
	@keyframes 动画名称2 {
		0% {状态1}
		10% {状态2}
		.....
		100% {状态10}
	}
</style>
  1. 使用动画
<style>
	animation: 动画名称 动画花费时长(s);
</style>

例如：

<!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>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation: change1 1s;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: green;
            animation: change2 1s;
        }
        @keyframes change1 {
            from{
                width: 100px;
            }
            to{
                width: 300px;
            }
        }
        @keyframes change2 {
            0% {
                width: 100px;
            }
            30% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

2.1 animation 复合属性

使用动画的属性值不止上面两种，具体为：

<style>
	animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
</style>
  • 动画名称和动画时长必须要写
  • 属性值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

速度曲线取值：

  • linear：匀速
  • steps(x)：x为数字，表示把动画分为x步完成。工作中可配合精灵图实现精灵图动画

重复次数取值：

  • 数字：表示重复次数
  • infinite：表示无限循环

动画方向取值：

  • alternate：反向动画

执行完毕时状态取值：

  • forwards：完毕时状态为动画最后状态
  • backwards：默认值，完毕时状态为初始状态

例如：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
            animation: change 1s linear 2s infinite alternate;
        }
        @keyframes change {
            0% {
                width: 100px;
            }
            30% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

2.2 animation 拆分属性

属性作用取值
animation-name动画名称动画名称
animation-duration动画时长时长(s)
animation-delay延迟时间时长(s)
animation-fill-mode动画执行完毕时状态forwaeds（最后一帧状态）；backwards（第一帧状态）
animation-timing-function速度曲线steps()：逐帧动画
animation-iteration-count重复次数infinite（无限循环）
animation-direction动画执行方向alternate（反向）
animation-play-state暂停动画paused（暂停），通常配合 :hover 使用

例如：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-delay: 1s;
            animation-timing-function: linear;
        }
        div:hover {
            animation-play-state: paused;
        }
        @keyframes change {
            0% {
                width: 100px;
            }
            30% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

2.3 多组动画

作用：设置一个标签使用多个动画

属性：

<style>
	animation:
		动画1,
		动画2,
		...
		动画N
	;
</style>

例如：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
            /* 使用多个动画 */
            animation: 
                change 1s linear infinite,
                move 3s
            ;
        }
        div:hover {
            animation-play-state: paused;
        }
        @keyframes move {
            from {
                transform: translate(0,0);
            }
            to {
                transform: translate(100px,0);
            }
        }
        @keyframes change {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画效果不便展示，请大家自行运行浏览

注：若动画初始状态与盒子默认样式相同，那么初始状态可以省略。

完

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

在AutoDL上部署Yi-34B大模型

在AutoDL上部署Yi-34B大模型

在AutoDL上部署Yi-34B大模型 Yi介绍 Yi 系列模型是 01.AI 从零训练的下一代开源大语言模型。Yi 系列模型是一个双语语言模型&#xff0c;在 3T 多语言语料库上训练而成&#xff0c;是全球最强大的大语言模型之一。Yi 系列模型在语言认知、常识推理、阅读理解等方面表现优异。 …
阅读更多...
【JavaEE】多线程(1)

【JavaEE】多线程(1)

&#x1f386;&#x1f386;&#x1f386;个人主页&#x1f386;&#x1f386;&#x1f386; &#x1f386;&#x1f386;&#x1f386;JavaEE专栏&#x1f386;&#x1f386;&#x1f386; &#x1f386;&#x1f386;&#x1f386;计算机是怎么工作的&#x1f386;&#x1f3…
阅读更多...
第七在线惊艳亮相第11届奥莱峰会，AI驱动零售供应链升级

第七在线惊艳亮相第11届奥莱峰会，AI驱动零售供应链升级

2024年5月22-24日&#xff0c;第11届奥莱领秀峰会暨2024奥莱产业经济论坛在南京盛大举行。论坛上&#xff0c;智能商品计划管理系统服务商第七在线凭借富有前瞻性的AI技术&#xff0c;引领零售供应链迈入全新升级阶段&#xff0c;赢得了与会嘉宾的广泛关注与赞誉。 峰会由中国奥…
阅读更多...
【一百】【算法分析与设计】N皇后问题常规解法+位运算解法

【一百】【算法分析与设计】N皇后问题常规解法+位运算解法

N皇后问题 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 给出一个nnn\times nnn的国际象棋棋盘&#xff0c;你需要在棋盘中摆放nnn个皇后&#xff0c;使得任意两个皇后之间不能互相攻击。具体来说&#xff0c;不能存在两个皇后位于同…
阅读更多...
BUUCTF Crypto RSA详解《1~32》刷题记录

BUUCTF Crypto RSA详解《1~32》刷题记录

文章目录 一、Crypto1、 一眼就解密2、MD53、Url编码4、看我回旋踢5、摩丝6、password7、变异凯撒8、Quoted-printable9、篱笆墙的影子10、Rabbit11、RSA12、丢失的MD513、Alice与Bob14、大帝的密码武器15、rsarsa16、Windows系统密码17、信息化时代的步伐18、凯撒&#xff1f;…
阅读更多...
springboot基本使用十一（自定义全局异常处理器）

springboot基本使用十一（自定义全局异常处理器）

例如&#xff1a;我们都知道在java中被除数不能为0&#xff0c;为0就会报by zero错误 RestController public class TestController {GetMapping("/ex")public Integer ex(){int a 10 / 0;return a;}} 打印结果&#xff1a; 如何将这个异常进行处理&#xff1f; 创…
阅读更多...
java——网络原理初识

java——网络原理初识

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 目录 1.网络通信概念初识1.1 IP地址1.2端口号1.3协议1.3.1协议分层协议分层带来的好处主要有两个方面 1.3.2 TCP/IP五层 (或四层模型)1.3.3 协议的层和层之间是怎么配合工作的 1.网络通信概念初识…
阅读更多...
RLC防孤岛保护装置如何工作的？

RLC防孤岛保护装置如何工作的？

什么是RLC防孤岛保护装置&#xff1f; 孤岛保护装置是电力系统中一道强大的守护利器&#xff0c;它以敏锐的感知和迅速的反应&#xff0c;守护着电网的平稳运行。当电网遭遇故障或意外脱离主网时&#xff0c;孤岛保护装置如同一位机警的守门人&#xff0c;立刻做出决断&#xf…
阅读更多...
算法（七）插入排序

算法（七）插入排序

文章目录 插入排序简介代码实现 插入排序简介 插入排序&#xff08;insertion sort)是从第一个元素开始&#xff0c;该元素就认为已经被排序过了。然后取出下一个元素&#xff0c;从该元素的前一个索引下标开始往前扫描&#xff0c;比该值大的元素往后移动。直到遇到比它小的元…
阅读更多...
MySQL 索引的使用

MySQL 索引的使用

本篇主要介绍MySQL中索引使用的相关内容。 目录 一、最左前缀法则 二、索引失效的场景 索引列运算 字符串无引号 模糊查询 or连接条件 数据分布 一、最左前缀法则 当我们在使用多个字段构成的索引时&#xff08;联合索引&#xff09;&#xff0c;需要考虑最左前缀法则…
阅读更多...
【VTKExamples::Utilities】第十七期 ZBuffer

【VTKExamples::Utilities】第十七期 ZBuffer

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ：870202403 公众号：VTK忠粉 前言 本文分享VTK样例ZBuffer，并解析接口vtkWindowToImageFilter，希望对各位小伙伴有所帮助！ 感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！ 你的点赞就是我的动力(＾Ｕ＾)ノ…
阅读更多...
【面试八股总结】MySQL事务：事务特性、事务并行、事务的隔离级别

【面试八股总结】MySQL事务：事务特性、事务并行、事务的隔离级别

参考资料&#xff1a;小林coding 一、事务的特性ACID 原子性&#xff08;Atomicity&#xff09; 一个事务是一个不可分割的工作单位&#xff0c;事务中的所有操作&#xff0c;要么全部完成&#xff0c;要么全部不完成&#xff0c;不会结束在中间某个环节。原子性是通过 undo …
阅读更多...
Arm发布Cortex X925、A725、A520，Armv9.2架构

Arm发布Cortex X925、A725、A520，Armv9.2架构

随着半导体行业的不断发展&#xff0c;Arm 通过突破技术界限&#xff0c;为终端用户提供尖端解决方案&#xff0c;在核心和 IP 架构创新方面处于领先地位&#xff0c;尤其是在移动领域。2024 年&#xff0c;Arm 的年度战略进步重点是增强去年的 Armv9.2 架构&#xff0c;并带来…
阅读更多...
Windows系统安装openvino（2024.1.0）

Windows系统安装openvino（2024.1.0）

一、openvino下载&#xff1a; 下载地址&#xff1a;下载英特尔发行版 OpenVINO 工具套件 (intel.cn) 下载完之后将压缩包解压&#xff0c;然后重命名文件夹为openvino_2024.1.0。 二、环境配置 以python环境为例&#xff1a;&#xff08;建议使用moniconda虚拟环境来安装&am…
阅读更多...
鸿蒙ArkTS声明式开发：跨平台支持列表【背景设置】 通用属性

鸿蒙ArkTS声明式开发：跨平台支持列表【背景设置】 通用属性

背景设置 设置组件的背景样式。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版…
阅读更多...
【免费Web系列】JavaWeb实战项目案例五

【免费Web系列】JavaWeb实战项目案例五

这是Web第一天的课程大家可以传送过去学习 http://t.csdnimg.cn/K547r 新增员工 前面我们已经实现了员工信息的条件分页查询。 那今天我们要实现的是新增员工的功能实现&#xff0c;页面原型如下&#xff1a; ​ 首先我们先完成"新增员工"的功能开发&#xff0…
阅读更多...
ODBC访问达梦数据库Ubuntu18.04 x86-x64(亲测有效)

ODBC访问达梦数据库Ubuntu18.04 x86-x64(亲测有效)

ODBC访问达梦数据库Ubuntu18.04 x86-x64 第1步&#xff1a;安装unixodbc驱动,使用下面命令。第2步&#xff1a;拷贝已经安装好的达梦数据库驱动程序第3步&#xff1a;配置ODBC必要的参数文件&#xff0c;如下图第4步&#xff1a;设置环境变量第5步&#xff1a;连接测试 说明&am…
阅读更多...
Github单个文件或者单个文件夹下载插件

Github单个文件或者单个文件夹下载插件

有时候我们在github上备份了一些资料&#xff0c;比如pdf,ppt&#xff0c;md之类的,需要用到的时候只要某个文件即可&#xff0c;又不要把整个仓库的zip包下载下来&#xff0c;毕竟有时文件太多&#xff0c;下载慢&#xff0c;我们也不需要所有资料&#xff0c;那么就可以使用到…
阅读更多...
docker安装Mysql5.7版本

docker安装Mysql5.7版本

首先Linux系统已经安装好了docker应用。 1.搜索镜像 docker search mysql 2.拉取5.7的镜像 总之，选starts最多的那个就对了。 docker pull mysql:5.7 ~ docker pull mysql:5.7 5.7: Pulling from library/mysql fc7181108d40: Downloading [============> …
阅读更多...
C语言数据结构（超详细讲解）| 二叉树的实现

C语言数据结构（超详细讲解）| 二叉树的实现

二叉树 引言 在计算机科学中&#xff0c;数据结构是算法设计的基石&#xff0c;而二叉树&#xff08;Binary Tree&#xff09;作为一种基础且广泛应用的数据结构&#xff0c;具有重要的地位。无论是在数据库索引、内存管理&#xff0c;还是在编译器实现中&#xff0c;二叉树都…
阅读更多...
最新文章

Copyright @ 2022~2023