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

【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

1. 前言

        本篇开始介绍Web2D和3D相关基础知识,会从CSS3的2D/3D转换、过渡、动画,讲到Canvas 2D图形绘制,再到SVG,最后到WebGL。

        坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,z轴正方向向外(垂直屏幕向外)。

2. 2D转换

        CSS3的2D/3D旋转,适用左手定则确认顺时针方向和逆时针方向(角度值是顺正逆负)

css函数说明示例
translate(x,y)定义2D转换,沿着X和Y轴移动

div {

  transform:translate(10px, 20px);

}

translateX(x)定义2D转换,沿着X轴移动
translateY(y)定义2D转换,沿着Y轴移动
rotate(angle)定义2D旋转,angle是旋转角度,正值-顺时针,负值-逆时针,旋转轴-穿过元素中心点、垂直于XY平面

div {

  transform: rotate(30deg);

}

scale(x,y)

定义2D缩放转换,改变元素宽高

注:仅显示上变化了,元素实际尺寸没改变

div {

  transform: scale(2,3);

}

scaleX(n)定义2D缩放转换,改变元素宽度
scaleY(n)定义2D缩放转换,改变元素高度
skew(angleX, angleY)

定义2D倾斜转换,沿着X和Y轴

注:不管怎么倾斜,元素中心点不变

div {

  transform:skew(15deg, 20deg);

}

skewX(angle)

定义2D倾斜转换,沿着X轴

正值-X轴正方向往负方向推

负值-X轴负方向往正方向推

skewY(angle)

定义2D倾斜转换,沿着Y轴

正值-Y轴正方向往负方向推-倾斜

负值-Y轴负方向往正方向推-倾斜

matrix(n,n,n,n,n,n)定义2D转换,6值矩阵
transform-origin

更改变换的参考源(参数点),默认是元素的中心点

transform-origin: x-axis y-axis z-axis;

x-axis: left | center | right | length | %

y-axis: top | center | bottom | length | %

z-axis: length 定义视图置于Z轴何处

x-axis,y-axis在元素自身中定位参考源位置

0% 0% 表示元素左上角

3. 3D转换
css函数说明示例
translate3d(x,y,z)定义3D转换,沿着X、Y和Z轴移动<略>
translateX(x)定义3D转换,沿着X轴移动<略>
translateY(y)定义3D转换,沿着Y轴移动<略>
translateZ(z)定义3D转换,沿着Z轴移动<略>
rotate3d(x,y,z,angle)定义3D旋转,绕(x,y,z)旋转<略>
rotateX(angle)定义3D旋转,绕着X轴旋转<略>
rotateY(angle)定义3D旋转,绕着Y轴旋转<略>
rotateZ(angle)定义3D旋转,绕着Z轴旋转<略>
scale3d(x,y,z)定义3D缩放,<略>
scaleX(x)定义3D缩放,<略>
scaleY(y)定义3D缩放,<略>
scaleZ(z)定义3D缩放,<略>

matrix(n,n,n,n,n,n,n,n,

n,n,n,n,n,n,n,n)

定义3D转换,16值矩阵<略>
perspective(n)定义3D转换元素的透视视图<略>
相关CSS属性
css属性描述示例
transform-origin更改变换的参考源(参数点)<略>
transform-style

嵌套元素如果在3D空间中显示

1. flat 表示所有子元素在2D平面呈现

2. preserve-3d 表示所有子元素在3D空间中呈现

<略>
perspective

3D元素的透视效果,设置在父元素上

1. number 元素距离视图的距离,以像素计

2. none 不设置透视

<略>
perspective-origin

3D元素的底部位置

perspective-origin: x-axis y-axis

x-axis: left | center | right | length | %

y-axis: top | center | bottom | length | %

<略>
backface-visibility

元素不面对屏幕时是否可见

1. visible 背面可见

2. hidden 背面不可见

<略>
4. 过渡
css属性描述示例
transitiontransition: property duration time-function delay是简写

div {

  transition: width 2s ease 1s, height 3s linear 2s;

}

transition-property

指定css属性的过渡效果

1. none 没有属性会获得过渡效果

2. all 所有属性应用过渡效果

3. property 使用过渡效果的css属性,多个时用逗号,分隔

transition-duration

过渡效果花费时间

1. time 完成过渡效果需要花费的时间(秒或毫秒),0值时则无过渡效果

transition-timing-function

过渡效果的速度

1. linear 以相同速度开始直到结束,cubic-bezier(0,0,1,1)

2. ease 先慢中快后慢,cubic-bezier(0.25, 0.1, 0.25,1)

3. ease-in 先慢后平滑,cubic-bezier(0.42,0,1,1)

4. ease-out 先平滑后慢,cubic-bezier(0,0,0,58,1)

5. ease-int-out 先慢中平滑后慢,cubic-bezier(0.42,0,0.58,1)

6. cubic-bezier(n,n,n,N) 自定义速度

transition-delay

过渡效果何时开始

1. time 指定秒或毫秒数之前要等待过渡效果开始

5. 动画
css属性描述示例
@keyframes

定义关键帧动画

1. 使用from to定义关键帧

@keyframes myFirst {

  from {

    ......

  }

  to {

    ......

  }

}

2. 使用百分比%定义关键帧

@keyframes myFirst {

  0% {

    ......

  }

  30% {

    ......

  }

  70% {

    ......

  }

  100% {

    ......

  }

}

@keyframes myFirst {

  0% {

    background: red;

    left:0px;

    top:0px;

  }

  25% {

    background: yellow;

    left:200px;

    top:0px;

  }

  50% {

    background: blue;

    left:200px;

    top:200px;

  }

  75% {

    background: green;

    left:0px;

    top:200px;

  }

  100% {

    background: red;

    left:0px;

    top:0px;

  }

}

animationanimation: name duration timing-function delay iteration-count direction fill-mode play-state;的简写

div {

  animation-name: myfirst;

  animation-duration: 5s;   animation-timing-function: linear;

  animation-delay: 2s;   animation-iteration-count: infinite;

  animation-direction: alternate;

  animation-play-state: running;

}

animation-name

1. 指定关键帧动的名称,由@keyFrames定义的

2. none 没有指定动画

animation-duration

1. time 动画完成一个周期需要花费时间(秒或毫秒),0值时则无动画效果

animation-timing-function

动画效果速度曲线

1. linear 以相同速度开始直到结束,cubic-bezier(0,0,1,1)

2. ease 先慢中快后慢,cubic-bezier(0.25, 0.1, 0.25,1)

3. ease-in 先慢后平滑,cubic-bezier(0.42,0,1,1)

4. ease-out 先平滑后慢,cubic-bezier(0,0,0,58,1)

5. ease-int-out 先慢中平滑后慢,cubic-bezier(0.42,0,0.58,1)

6. cubic-bezier(n,n,n,N) 自定义速度

7. steps(int, start | end)

animation-delay

动画效果何时开始

1. time 指定秒或毫秒数之前要等待动画效果开始

animation-iteration-count

动画被播放的次数

1. number 

2. infinite 一直重复播放

animation-direction

动画播放的方向

1. normal 正常播放

2. reverse 反向播放

3. alternate 奇数次正向,偶数次逆向

4. alternate-reverse 奇数次逆向,偶数次正向

5. initial 设置该属性为它默认值

6. inherit 从父元素继承

animation-fill-mode

动画不播放时,应用到元素的样式

1. none 默认

2. forwards 运用动画结束时的属性值

3. backwards 第一个迭代时第一帧的值

4. both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性

5. inital 设置该属性为它的默认值

6. inherit 从父元素继承

animation-play-state

1. paused 指定暂停动画

2. running 指定运行动画

JS操作会使用到

下一篇:【Web2D/3D】SVG(第二篇)-CSDN博客

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~

相关文章:

【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

1. 前言 本篇开始介绍Web2D和3D相关基础知识&#xff0c;会从CSS3的2D/3D转换、过渡、动画&#xff0c;讲到Canvas 2D图形绘制&#xff0c;再到SVG&#xff0c;最后到WebGL。 坐标系&#xff1a;左上点是坐标原点(0,0)&#xff0c;x轴正方向向右&#xff0c;y轴正方向向下&…...

uView NumberBox 步进器

该组件一般用于商城购物选择物品数量的场景 注意&#xff1a;该输入框只能输入大于或等于0的整数 #平台差异说明 App&#xff08;vue&#xff09;App&#xff08;nvue&#xff09;H5小程序√√√√ #基本使用 通过v-model绑定value初始值&#xff0c;此值是双向绑定的&…...

三菱plc的点动控制循环(小灯闪烁,单控气缸循环)

以为前一段时间小编做了一个气缸定时循环的程序&#xff0c;根据程序有不足之处&#xff0c;所以小编写下这篇文章&#xff0c;将网络上的plc小灯控制进行总结&#xff01;如果对你有帮助&#xff0c;不要忘了点赞收藏&#xff01;如果有更加好的梯形图&#xff0c;欢迎评论&am…...

学习Go语言Web框架Gee总结--http.Handler(一)

学习Go语言Web框架Gee总结--http.Handler http-base/go.modhttp-base/main.gohttp-base/gee/gee.gohttp-base/gee/go.mod 网站学习来源&#xff1a;Gee 代码目录结构&#xff1a; http-base/go.mod //指定当前模块的名称为 "example" module example//指定当前模…...

react+redux+antd-mobile 之 记账本案例

1.环境搭建 //使用CRA创建项目&#xff0c;并安装必要依赖&#xff0c;包括下列基础包 //1. Redux状态管理 - reduxjs/toolkit 、 react-redux //2. 路由 - react-router-dom //3. 时间处理 - dayjs //4. class类名处理 - classnames //5. 移动端组件库 - antd-mobile //6. 请…...

Day22

Day22 一,生产者消费者模型 1.1,单个生产者单个消费者 public class Test01 {/*** 知识点&#xff1a;生产者消费者模型 - 单个生产者单个消费者* * 分析&#xff1a;* 产品类 - Phone&#xff1a;属性(brand,price)* 生产者线程 - Producer* 消费者线程 - Consumer* …...

Windows下linux 子系统 WSL2怎样使用usb串口(USBIPD-win4.0.0)

Windows下linux 子系统 WSL2怎样使用usb串口&#xff08;USBIPD-win4.0.0&#xff09; 一、widows安装二、ubuntu安装三、widows配置四、wsl配置 一、widows安装 https://github.com/dorssel/usbipd-win 直接下载最新版本的msi文件安装 二、ubuntu安装 sudo apt install lin…...

飞腾Ubantu22.04.3安装OpenNebula测试

1.概述 因OpenneBula官方镜像源只有AMD架构的镜像包不存在ARM的镜像包&#xff0c;借此用源码编译进行测试。 2.官网github地址 下载解压存放在服务器上&#xff1a; https://github.com/OpenNebula/minione/blob/master文件目录&#xff1a; 3.安装依赖包 sudo apt -y …...

gookit/color - Go语言命令行色彩使用库教程

gookit/color - Go语言命令行色彩使用库教程 1.安装2.基础颜色(16-color)3.256色彩/RGB风格 1.安装 go get github.com/gookit/color2.基础颜色(16-color) 提供通用的API方法&#xff1a;Print Printf Println Sprint Sprintf 1、例如&#xff1a; color.Yellow.Println(&q…...

python弹奏《起风了》

代码是很大的! 其实就是python用ctypes调用Win API import ctypes import threading import time winmm = ctypes.windll.winmmclass Scale:Rest = 0C8 = 108B7 = 107A7s = 106A7 = 105G7s = 104G7 = 103F7s = 102F7 = 101E7 = 100D7s = 99D7 = 98C7s = 97C7 = 96B6 = 95A6s…...

Linux---all

Linux常用命令&#xff1a; Linux常用命令-CSDN博客 Linux命令大全(超详细版)_linux命令行大全-CSDN博客Linux常用命令大全&#xff08;非常全面&#xff09;-CSDN博客Linux 命令大全&#xff08;看这一篇就足够&#xff09;_linux命令-CSDN博客Linux常用命令大全——赶紧收藏…...

前端中级算法题

前端中级算法题 反转字符串 编写一个函数&#xff0c;接受一个字符串作为输入&#xff0c;并返回反转后的字符串。 示例&#xff1a; function reverseString(str) {return str.split().reverse().join(); }reverseString(hello); // 输出: olleh 找出数组中的最大值 编写一个函…...

Ant Design Vue 编译后的网页特点是什么,怎么确认他是用的前端 Ant Design Vue 技术栈的呢?

Ant Design Vue 是一个前端 UI 框架&#xff0c;使用 Vue.js 构建。它包含了大量的预设样式和组件&#xff0c;如按钮、表单、表格等&#xff0c;可以帮助开发者快速构建出优雅且功能丰富的网页。但是&#xff0c;要确定一个编译后的网页是否使用了 Ant Design Vue&#xff0c;…...

python | PYTHON正则表达式

操作符说明实例.表示任何单个字符[]字符集&#xff0c;对单个字符给出取值范围[abc]表示a、b、c&#xff0c;[a-z]表示a到z单个字符[^ ]非字符集&#xff0c;对单个字符给出排除范围[^abc]表示非a或b或c的单个字符*前一个字符0次或无限次扩充abc* 表示ab&#xff0c;abc&#x…...

为什么大学c语言课不顺便教一下Linux,Makefile

为什么大学c语言课不顺便教一下Linux&#xff0c;Makefile&#xff0c;git&#xff0c;gdb等配套工具链呢? 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「Linux的资料从专业入门到高级教程工具包」&…...

Go后端开发 -- main函数 变量 常量 函数

Go后端开发 – main函数 & 变量 & 常量 & 函数 文章目录 Go后端开发 -- main函数 & 变量 & 常量 & 函数一、第一个main函数1.创建工程2.main函数解析 二、变量声明1.单变量声明2.多变量声明 三、常量1.常量的定义2.优雅的常量 iota 四、函数1.函数返回…...

2023/12/30 c++ work

定义一个Person类&#xff0c;私有成员int age&#xff0c;string &name&#xff0c;定义一个Stu类&#xff0c;包含私有成员double *score&#xff0c;写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数&#xff0c;完成对Person的运算符重载(算术运算符、条件运算…...

ctfshow——文件上传

文章目录 文件上传思路web 151web 152web 153知识点解题 web 154web 155web 156web 157web 158web 159web160web 161 文件上传思路 web 151 打开页面显示&#xff1a;前台校验不可靠。说明这题是前端验证。 右键查看源代码&#xff0c;找到与上传点有关的前端代码&#xff1a…...

【RocketMQ每日一问】RocketMQ SQL92过滤用法以及原理?

1.生产端 public class SQLProducer {public static int count 10;public static String topic "xiao-zou-topic";public static void main(String[] args) {DefaultMQProducer producer MQUtils.createLocalProducer();IntStream.range(0, count).forEach(i -&g…...

Go语言中的包管理工具之Go Path的使用

GoLang 中常用的包管理的方式 1 &#xff09;概述 常用的有三种 Go PathGo VendorGo Modules 2 &#xff09;发展历程 早期go的包管理存在很大缺陷&#xff0c;甚至可以说没有官方统一的包管理工具 一方面官方在努力发布一些实验性的包管理工具。同时也出现了很多社区开发…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

C++ 类基础:封装、继承、多态与多线程模板实现

前言 C 是一门强大的面向对象编程语言&#xff0c;而类&#xff08;Class&#xff09;作为其核心特性之一&#xff0c;是理解和使用 C 的关键。本文将深入探讨 C 类的基本特性&#xff0c;包括封装、继承和多态&#xff0c;同时讨论类中的权限控制&#xff0c;并展示如何使用类…...

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...

【汇编逆向系列】六、函数调用包含多个参数之多个整型-参数压栈顺序,rcx,rdx,r8,r9寄存器

从本章节开始&#xff0c;进入到函数有多个参数的情况&#xff0c;前面几个章节中介绍了整型和浮点型使用了不同的寄存器在进行函数传参&#xff0c;ECX是整型的第一个参数的寄存器&#xff0c;那么多个参数的情况下函数如何传参&#xff0c;下面展开介绍参数为整型时候的几种情…...