CSS 空间转换 动画

news2024/11/25 19:49:35

目录

  • 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>

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

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

完

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

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

相关文章

芋道系统，springboot+vue3+mysql实现地址的存储与显示

芋道系统，springboot+vue3+mysql实现地址的存储与显示

1.效果图 2.前端实现&#xff1a; <el-form-item label"地址" prop"entrepriseAddress"><el-cascaderv-model"formData.entrepriseAddress"size"large":options"region"/></el-form-item> //导入组件 im…
阅读更多...
不借助三方平台自主搭建量化回测系统 ——以海龟交易策略为例

不借助三方平台自主搭建量化回测系统 ——以海龟交易策略为例

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…
阅读更多...
编译安装PHP服务（LAMP3）

编译安装PHP服务（LAMP3）

目录 1.初始化设置&#xff0c;将安装PHP所需软件包传到/opt目录下 &#xff08;1&#xff09;关闭防火墙 &#xff08;2&#xff09;上传软件包到/opt目录 2.安装GD库和GD库关联程序&#xff0c;用来处理和生成图片 3.配置软件模块 4.编译及安装 5.优化把PHP 的可执行程…
阅读更多...
Spring boot 随笔 1 DatasourceInitializer

Spring boot 随笔 1 DatasourceInitializer

0. 为啥感觉升级了 win11 之后&#xff0c;电脑像是刚买回来的&#xff0c;很快 这篇加餐完全是一个意外&#xff1a;时隔两年半&#xff0c;再看 Springboot-quartz-starter 集成实现的时候&#xff0c;不知道为啥我的h2 在应用启动的时候&#xff0c;不能自动创建quartz相关…
阅读更多...
剖析【C++】——类和对象(下篇)——超详解——小白篇

剖析【C++】——类和对象(下篇)——超详解——小白篇

目录 1.再谈构造函数 1.1 构造函数体赋值 1.2 初始化列表 1.3 explicit 关键字 2. Static成员 2.1 概念 2.2 特性 3. 友元 3.1 友元函数 3.2 友元类 3.3总结&#xff1a; 4. 内部类 1.概念 2.特性 示例代码&#xff1a; 代码分析 3.总结 5.再次理解类和对象 …
阅读更多...
vue2转vue3初步下载pnpm遇到的问题 pnpm : 无法加载文件 D:\nodejs\pnpm.ps1

vue2转vue3初步下载pnpm遇到的问题 pnpm : 无法加载文件 D:\nodejs\pnpm.ps1

安装pnpm npm install -g pnpm pnpm -v 提示&#xff1a; 解决&#xff1a;nvm install 18.18.0 下载最稳定版本的nodejs nvm use 18.18.0 然后注意重新下载删除pnpm npm uninsta17 -g pnpm npm install -g pnpmlatest 在vscode使用pnpm报错 解决&#xff1a;管理员运行Windo…
阅读更多...
C语言.数据结构.单链表

C语言.数据结构.单链表

数据结构.单链表 1.链表的概念及结构2.单链表的实现2.1链表的打印2.2节点的申请2.3单链表的尾插2.4单链表的头插2.5单链表的尾删2.6单链表的头删2.7单链表节点的查找2.8在指定位置之前插入数据2.9在指定位置之后插入数据2.10删除pos节点2.11删除pos之后的节点2.12单链表的销毁2…
阅读更多...
新一代最强开源UI自动化测试神器Playwright（Java版）六（断言）

新一代最强开源UI自动化测试神器Playwright（Java版）六（断言）

Playwright是一个流行的UI自动化测试框架&#xff0c;用于编写UI自动化测试。在测试中&#xff0c;断言是一个非常重要的概念&#xff0c;用于验证测试的结果是否符合预期。Playwright提供了一些内置的断言函数&#xff0c;可以帮助测试人员编写更加简洁和可读的测试代码。本文…
阅读更多...
为啥装了erlang，还报错erl: command not found？

为啥装了erlang，还报错erl: command not found？

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 问题背景&#xff1a; 在一台不通外网的服务器上装rabbitmq&#xff0c;然后在启动的时候&#xff0c;遇到了报错 “/usr/lib/…
阅读更多...
走进中国照明百强西顿照明，解码数字化战略与经营增长

走进中国照明百强西顿照明，解码数字化战略与经营增长

5月24日&#xff0c;纷享销客携领20多位企业高管走进纷享销客【数字化标杆】游学示范基地——西顿照明&#xff0c;并参访其位于惠州总部的光之家及灯巢&#xff0c;特邀广东端到端管理咨询兼纷享管理服务专家陈立云、西顿照明CIO唐勇作主题分享&#xff0c;为嘉宾带来一场解码…
阅读更多...
【成品设计】基于STM32单片机的饮水售卖机

【成品设计】基于STM32单片机的饮水售卖机

基于STM32单片机的饮水售卖机 所需器件&#xff1a; STM32最小系统板。RFID&#xff1a;MFRC-522用于IC卡检测。OLED屏幕&#xff1a;用于显示当前水容量、系统状态等。水泵软管&#xff1a;用于抽水。水位传感器&#xff08;3个&#xff09;&#xff1a;用于分别标定&#x…
阅读更多...
Qt-qrencode生成二维码

Qt-qrencode生成二维码

Qt-qrencode开发-生成二维码&#x1f4c0; 文章目录 Qt-qrencode开发-生成二维码&#x1f4c0;[toc]1、概述&#x1f4f8;2、实现效果&#x1f4bd;3、编译qrencode&#x1f50d;4、在QT中引入编译为静态库的QRencode5、在Qt中直接使用QRencode源码6、在Qt中使用QRencode生成二…
阅读更多...
数据可视化：解析其在现代生活中的日益重要地位

数据可视化：解析其在现代生活中的日益重要地位

数据可视化为什么对我们的生活影响越来越大&#xff1f;这是一个值得探讨的话题。在信息化时代&#xff0c;数据无处不在&#xff0c;海量的数据不仅改变了商业模式&#xff0c;也深刻影响了我们的日常生活。数据可视化作为一种将复杂数据转化为直观图表、图形的技术&#xff0…
阅读更多...
ubuntu22.04.3 vmware虚拟机配置共享文件夹 解决无法挂载/mnt/hgfs，血泪教训

ubuntu22.04.3 vmware虚拟机配置共享文件夹 解决无法挂载/mnt/hgfs，血泪教训

一、背景介绍 在VMware Workstation 17 Pro上创建ubuntu22.04.3虚拟机&#xff0c;实现在ubuntu系统中共享windows的文件夹。按照网上方法试了大半&#xff0c;都没法解决&#xff0c;最终发现是vmware tools安装出现了问题&#xff0c;成功安装后&#xff0c;解决。 二、配置…
阅读更多...
【软件测试】软件测试概念 | 测试用例 | BUG | 开发模型 | 测试模型 | 生命周期

【软件测试】软件测试概念 | 测试用例 | BUG | 开发模型 | 测试模型 | 生命周期

文章目录 一、什么是软件测试1.什么是软件测试2.软件测试和调试的区别测试人员需要的素养 二、软件测试概念1.需求1.需求的定义2.测试人员眼中的需求 2.测试用例1.测试用例概念 3.BUG 软件错误4、开发模型和测试模型1.软件的生命周期2.开发模型1.瀑布模型2.螺旋模型3.增量、迭代…
阅读更多...
端午档新片已预热，强业绩修复的影视股为何仍在徘徊？

端午档新片已预热，强业绩修复的影视股为何仍在徘徊？

随着端午临近&#xff0c;假期13部新片开始定档。据猫眼专业版显示&#xff0c;截至5月29日11时&#xff0c;即将上映的这13部新片&#xff0c;预售总票房已达到2155万。 受此消息影响&#xff0c;近日影视股出现了小幅的触底震荡反弹迹象&#xff0c;其中IMAX中国(01970)反弹…
阅读更多...
记录Win11安装打印机驱动过程

记录Win11安装打印机驱动过程

1. 首先下载打印机对应型号的驱动 可以从这里下载&#xff1a;打印机驱动,打印机驱动下载 - 打印机驱动网 2. 下载 3. 打开控制面板-->设备和打印机 找到目标打印机添加设备即可 新增打印纸张尺寸
阅读更多...
上传图片并显示#Vue3#后端接口数据

上传图片并显示#Vue3#后端接口数据

上传图片并显示#Vue3#后端接口数据 效果&#xff1a; 代码&#xff1a; <!-- 上传图片并显示 --> <template><!-- 上传图片start --><div><el-form><el-form-item><el-uploadmultipleclass"avatar-uploader"action"…
阅读更多...
借助AI大模型，三分钟原创一部儿童故事短视频（附完整操作步骤）

借助AI大模型，三分钟原创一部儿童故事短视频（附完整操作步骤）

前面文章的介绍&#xff0c;我们可以通过在自己笔记本电脑上部署的Llama 3大模型生成文章、文本润色、生成摘要等。今天我们更进一步&#xff0c;在文本的基础上&#xff0c;快速制作一部儿童故事短视频&#xff0c;且可根据自己需要完全原创…… 前提&#xff1a;有AI大模型对…
阅读更多...
禅道迁移，linux一键安装版

禅道迁移，linux一键安装版

问题描述&#xff1a;公司需要迁移禅道到另外一台服务器&#xff0c;没迁移过&#xff0c;去官网看了之后成功迁移&#xff0c;其中遇到了很多坑,希望对你们有所帮助。 禅道版本 迁移的版本一致&#xff0c;我的版本是18.3&#xff0c;18.3下载页面 其他版本下载 先进入检…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023