HTML5与CSS3的新特性

1、HTML5新特性

1.1、新特性的兼容问题

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.2、HTML5新增的语义化标签

以前布局，我们基本使用div来做，div对于搜索引擎来说，是没有语义的。例如：

<!--指明导航链接, 头部, 以及尾部等，以前都是我们自定义，没有语义-->
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

所以为了使元素能够清楚的描述其意义给浏览器和开发者，HTML5新增了语义元素，也叫语义化标签。常用的有以下几个：

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

例如：

<!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>Document</title><style>header,nav {width: 900px;height: 90px;background-color: rgb(120, 185, 21);border-radius: 15px;margin: 10px auto;}section {width: 500px;height: 200px;background-color: skyblue;}</style>
<body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section>
</body>
</html>

效果图：

注意：

这种语义化标签主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素，因为在IE9中新标签默认不是块级元素
其实，我们一定端更喜欢使用这些标签
HTML5中还增加了很多其他的标签，以后接触到时，可自行学习

更多可查看菜鸟教程：https://www.runoob.com/html/html5-intro.html

1.3、HTML5新增的多媒体标签

新增的多媒体标签主要包含如下两个：

<video>视频
<audio>音频

使用它们可以很方便的在页面中嵌入音频和视频，而不是再去使用flash和其他浏览器插件。

HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然支持的格式是有限的。

1、视频<video>标签的使用：

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

语法：

<video src="文件地址" controls="controls"></video><!--也可以这样书写，先看浏览器支不支持mp4，不支持再看ogg，在不支持就显示您的浏览器不支持 video 标签。 元素。-->
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。
</video>

可选属性：

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频URL地址
poster	imgrul	加载等待的画面图片
muted	muted	静音播放

使用示例：小米官网小米11视频。

<!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>Document</title><style>video {width: 100%;height: 500px;}</style>
</head>
<body><video src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.mp4" autoplay="autoplay" muted="muted"controls="controls"loop="loop"poster="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.png"></video>
</body>
</html>

2、音频<audio>标签的使用：

<audio>·标签定义声音，比如音乐或其他音频流。

目前，<audio>元素支持的3种文件格式：MP3、Wav、Ogg。

语法：

<audio src="文件地址" controls="controls"></audio><!-- 另一种写法，依次判断浏览器支持的格式 -->
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>

提示：可以在 <audio>和 </audio>之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio>标签的浏览器中。

常见属性：

属性	值
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。

注意：谷歌浏览器吧音频和视频自动播放禁止了。

案例：

<!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>Document</title>
</head>
<body><!--注意此标签是行内元素--><audio src="https://webfs.yun.kugou.com/202103031105/0e19f0d587042c37572df689e419d9ef/KGTX/CLTX001/f8784ebfbae36b324ec1e3441b6156b4.mp3"autoplay="autoplay"controls="controls"></audio><audio src="https://webfs.yun.kugou.com/202103031105/0e19f0d587042c37572df689e419d9ef/KGTX/CLTX001/f8784ebfbae36b324ec1e3441b6156b4.mp3"autoplay="autoplay"controls="controls"></audio>
</body>
</html>

效果图：

多媒体标签总结：

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频或音频标签添加muted属性来静音播放视频或音频。
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性。

1.4、HTML5新增的 input 类型

在小米官网中搜索框里的type类型变成了search，在 HTML5中, <input>添加了几个属性，并且添加了对应的值。

更多属性可查看菜鸟教程：https://www.runoob.com/tags/tag-input.html

例如：新增加常用的属性值有

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

案例：测试以上属性值

<!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>Document</title><style>ul li {list-style: none;}</style>
</head>
<body><!-- 我们验证的时候必须添加 form 表单域 --><form action="#" method="get"><ul><li>邮箱：<input type="email"></li><li>URL：<input type="url"></li><li>日期(年月日)：<input type="date"></li><li>日期(时分)：<input type="time"></li><li>月份：<input type="month"></li><li>星期：<input type="week"></li><li>数量：<input type="number"></li><li>搜索：<input type="search"></li><li>颜色表：<input type="color"></li><li>手机号码：<input type="tel"></li><!-- 当我们提交时，即可验证输入类型是否正确 --><li><input type="submit" value="提交"></input></li></ul></form>
</body>
</html>

验证条件：

在form表单域内
提交时才会看到验证效果

1.5、HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如`autocomlete="on"`，关闭`autocomlete="off"`需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

/* 可以通过以下设置方式修改placeholder里面的字体颜色 */
input::placeholder {color: blue;
}

测试：

<!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>Document</title><style>input::placeholder {color: blue;}</style>
</head>
<body><form action="" method="get"><!-- required: 输入框内容必须书写 placeholder: 提示文本 autofocus: 自动获取聚焦--><input type="search" required="required" placeholder="手机" autofocus="autofocus" autocomplete="off"><input type="file" multiple="multiple"><input type="submit" value="提交"></form>
</body>
</html>

效果图：

2、CSS3新特性

2.1、CSS3的现状

首先需要注意的一点就是CSS3已完全向后兼容，所以我们就不必改变现有的设计。浏览器将永远支持CSS2。其次新增的CSS3特性有兼容性问题，IE9+的浏览器才支持。

CSS3被拆分为 “模块”。旧规范已拆分成小块，还增加了新的特性。

一些最重要CSS3新特性如下：

选择器
盒子模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

2.2、CSS3新增的选择器

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器
结构伪类选择器
伪元素选择器

2.2.1、属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器。

语法：

选择符	描述
E[attr]	选择具有 attr属性的 E 元素
E[attr=“value”]	选择具有 attr属性且属性值等于value的 E 元素
E[attr^=“value”]	匹配具有 attr属性且值以value开头的 E 元素
E[attr$=“value”]	匹配具有 attr属性且值以value结尾的 E 元素
E[attr*=“value”]	匹配具有 attr属性且值中含有value的 E 元素

注意：类选择器、属性选择器、伪类选择器，权重为10。

使用测试：

<!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>Document</title><style>/* 属性选择器写法，选择input标签有value属性的元素 */input[value] {background-color: skyblue;}/* 选择input标签type属性等于password的元素 */input[type="password"] {color: red;}/* 选择div标签class属性值以icon开头的元素 */div[class^="icon"] {color: red; /* 统一设置为红色 */}</style>
</head>
<body><!-- 1.利用书写选择器可以不用借助于类或者id选择器 --><input type="text" value="hello"><input type="text"><br><!-- 2.属性选择器还可以选择属性 = 值的某些元素 --><input type="text"><input type="password" placeholder="密码"><!-- 3.属性选择器可以选择属性值开头的某些元素 --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><!-- 4.属性选择器可以选择属性值结尾的某些元素 --><!-- 可以自己测试 -->
</body>
</html>

效果图：

2.2.2、结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级元素里面的子元素。

语法：

选择符	描述
E:first-child	匹配父元素中的第一个子元素 E
E:last-child	匹配父元素中最后一个子元素 E
E:nth-child(n)	匹配父元素中的第 N 个子元素 E
E:first-of-type	指定类型 E 的第一个
E:last-of-type	指定类型 E 的最后一个
E:nth-of-type(n)	指定类型 E 的第 N 个

关于first-child、last-child、nth-child(n)的测试：

<!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>Document</title><style>/* 选择ul里的第1个子元素 */ul li:first-child {color: red;}/* 选择ul里的最后一个子元素 */ul li:last-child {color: blue;}/* 选择ul里的第3个子元素 */ul li:nth-child(3) {color: chartreuse;}</style>
</head>
<body><ul><li>我是ul的第1个孩子</li><li>我是ul的第2个孩子</li><li>我是ul的第3个孩子</li><li>我是ul的第4个孩子</li><li>我是ul的第5个孩子</li></ul>
</body>
</html>

效果图：

nth-child(n)选择某个父元素的一个或多个特定的子元素。

n 可以是数字，关键字和公式
n 如果是数字，就是选择第n个子元素，里面数字从1开始。
n 可以是关键字！例如even代表所有偶数，odd代表所有奇数。
n 可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式	取值
2n	偶数
2n + 1	奇数
5n	5 10 15 …
n + 5	从第5个开始（包含第5个）到最后
-n + 5	前5个（包含第5个）…

案例：

<!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>Document</title><style>/* 1、选择ul里的偶数子标签 */ul li:nth-child(even) {background-color: rgb(207, 202, 202);}/* 2、选择ul里的奇数子标签 */ul li:nth-child(odd) {background-color: rgb(167, 157, 157);}/* 3、nth-child(2n) 等效于 nth-child(even) 从0开始每次加1往后面计算。这里面必须是n 不能是其他的字母 */ol li:nth-child(2n) {background-color: skyblue;}</style>
</head>
<body><ul><li>我是ul的第1个孩子</li><li>我是ul的第2个孩子</li><li>我是ul的第3个孩子</li><li>我是ul的第4个孩子</li><li>我是ul的第5个孩子</li></ul><ol><li>我是ul的第1个孩子</li><li>我是ul的第2个孩子</li><li>我是ul的第3个孩子</li><li>我是ul的第4个孩子</li><li>我是ul的第5个孩子</li></ol>
</body>
</html>

效果图：

关于first-of-type、last-of-type、nth-of-type(n)的测试：

值得注意的是。如果子元素类型都相同first-of-type、last-of-type、nth-of-type(n)与first-of-type、last-of-type、nth-of-type(n)最终呈现的效果是一样的。但是实现的方式有所区别。

<!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>Document</title><style>/* nth-child(n) 会把所有的盒子都排列序号。执行的时候首先看是第几个"孩子"，之后回去看指定的元素div */section div:nth-child(1) {background-color: red;}/* nth-of-type(n)：会把指定元素(div)的盒子排列序号。执行的时候首先看指定的元素div，之后回去看是第几个"孩子" */section div:nth-of-type(1) {background-color: springgreen;}</style>
</head>
<body><section><p>Java</p><div>Python</div><div>C/C++</div></section>
</body>
</html>

效果图：

小结：

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对付元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否和 E 匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E找第 n 个孩子
关于 nth-child(n)我们要知道 n 是从0开始计算的，要记住常用的公式。
如果是无序列表，我们肯定用nth-child更多
类选择器、属性选择器、伪类选择器、权重为10

2.2.3、伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

常见的选择符：

选择符	描述
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
语法：element::before { /* 样式 */}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为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>Document</title><style>div {width: 200px;height: 200px;background-color: skyblue;}div::before {content: "Java"; /* content属性必须要写 */color: red;}div::after {content: "JavaScript";color: blue;}</style>
</head>
<body><div>hello</div>
</body>
</html>

效果图：

伪元素选择器使用场景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>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?7mwi7k');src: url('fonts/icomoon.eot?7mwi7k#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7mwi7k') format('truetype'),url('fonts/icomoon.woff?7mwi7k') format('woff'),url('fonts/icomoon.svg?7mwi7k#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid black;margin: 50px auto;}div::after {position: absolute;top: 10px;right: 10px;font-size: 18px;font-family: 'icomoon';/* content: ""; */content: "\e900";}</style>
</head><body><div></div>
</body></html>

伪元素选择器使用场景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>Document</title><style>.box {position: relative;width: 402px;height: 224px;margin: 100px auto;}.box img {width: 100%;height: 100%;}.box::before {content: "";position: absolute;display: none; /* 隐藏遮罩层 */width: 100%;height: 100%;background: rgba(0,0,0,0.5) url('./images/arr.png') no-repeat center;}/* 当鼠标经过这个盒子，就让里面的遮罩层显示出来 */.box:hover::before {display: block; /* 鼠标经过显示元素 */}</style>
</head>
<body><div class="box"><img src="https://m.ykimg.com/054F010160226EA4047BD7AA7DE68228?x-oss-process=image/resize,w_490/crop,x_0,y_0,w_490,h_276" alt="熊出没"></div>
</body>
</html>

伪元素选择器使用场景3：伪元素清除浮动

清除浮动的方法回顾：

父级添加 overflow属性
父级添加after伪元素
父级添加双伪元素
额外标签法也称为隔墙法，是W3C推荐的做法

使用伪元素清除浮动与额外标签法清除浮动的原理是一样的，伪元素法算是额外标签法的一个升级与优化。

/* 单冒号是照顾低版本浏览器 */
.clearfix:after {content: "";display: block; /* 插入的元素必须是块级的 */height: 0; /* 隐藏元素 */clear: both; /* 核心代码 */visibility: hidden; /* 隐藏元素 */
}

2.3、CSS3盒子模型

在CSS3之前，我们声明的盒子如果加了border和padding，都会撑大我们的盒子！此时我们需要适当的减去border和padding才能保证我们盒子原来的大小，这一过程非常的麻烦！

所以在css3中有了新的盒子模型去解决这一问题。

CSS3中可以通过box-sizing来指定盒子模型，有2个值：

content-box
border-box

这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

box-sizing: content-box;盒子大小为 width + padding + border （以前默认的就是需要减去border与padding的方式）
box-sizing: border-box;盒子大小为width

如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提是padding和border相加不会超过width宽度）

例如：

<!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>Document</title><style>.box1 {width: 200px;height: 200px;background-color: yellowgreen;border: 20px solid red;padding: 10px;box-sizing: content-box; /* 默认方式 */}.box2 {width: 200px;height: 200px;background-color: yellowgreen;border: 20px solid red;padding: 10px;box-sizing: border-box; /* 指定border-box方式，即width就是盒子大小 */}</style>
</head>
<body><div class="box1"></div><hr><div class="box2"></div>
</body>
</html>

效果图：

2.4、CSS3图片模糊处理（了解）

css3中过滤属性filter：

filter css属性将模糊或颜色偏移等图形效果应用于元素。

语法：

filter: 函数(); /* 例如：filter: blur(5px); blur模糊处理，数值越大越模糊*/

更多可使用函数可查看菜鸟教程：https://www.runoob.com/cssref/css3-pr-filter.html

例如：图片的模糊处理我们可以使用blur()函数

代码实现：

<!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>Document</title><style>div img {filter: blur(3px); /* 图片模糊处理，数值越大越模糊 */}</style>
</head>
<body><h5>处理前：</h5><img src="./image/c.jpg" alt=""><h5>处理后：</h5><div><img src="./image/c.jpg" alt=""></div>
</body>
</html>

2.5、计算盒子宽度calc()函数

calc()此css函数让你在声明css属性值时执行一些计算。

例如：

width: calc(100% - 80px);

括号里可以使用+ - * /来进行计算。

例如：有这样一个需求子盒子宽度永远比父盒子小30像素！我们就可以使用calc()函数去计算子盒子的宽度。

<!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>Document</title><style>.father {width: 300px;height: 200px;background-color: yellowgreen;}.son {width: calc(100% - 30px);height: 30px;background-color: red;}</style>
</head>
<body><!-- 需求我们的子盒子宽度永远比父盒子小30像素 --><div class="father"><div class="son"></div></div>
</body>
</html>

2.6、CSS3过渡（重点）

过渡(transition)是css3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或者 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态。

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(IE9以下的版本)，但是不会影响页面布局。

我们先在经常和:hover一起搭配使用。

例如：在小米官网中的小米logo，当鼠标经过时会有一个过渡动画！

transition的使用语法：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;/* 默认值 */
transition: all 0 ease 0; /* 注意不可以继承 */

属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可。如果想要所有的属性都变化过渡，写一个 all就可以了。
花费时间：单位是秒（必须填写单位）比如 0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是秒（必须填写单位）可以设置延迟触发时间默认是 0s（可以省略）

那么过渡要加在哪里呢？记住一个口诀：谁做过渡给谁加

案例：将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 200px 到 400px。

<!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>Document</title><style>div {width: 200px;height: 100px;background-color: skyblue;/* transition: 变化的属性 花费时间 运动曲线 何时开始; */transition: width 0.5s; /* 后面两个可以省略 */}div:hover {width: 400px;}</style>
</head>
<body><div></div>
</body>
</html>

如果需要同时改变多个属性，可以这样书写（使用逗号隔）：

div {width: 200px;height: 100px;background-color: skyblue;/* transition: 变化的属性 花费时间 运动曲线 何时开始; */transition: width 0.5s,height 0.5s;/* transition: all 0.5s */
}
div:hover {width: 400px;height: 200px;
}

过渡(transition)的使用案例：实现进度条效果。

代码实现：

<!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>Document</title><style>.bar {width: 200px;height: 10px;border: 1px solid red;border-radius: 7px;padding: 1px 0;}.bar .bar_in {width: 50%;height: 100%;background-color: red;transition: width 0.7s;}.bar:hover .bar_in {width: 100%;}</style>
</head>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
</html>

3、CSS3 新特性之动画属性

3.1、CSS3 2D转换

转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

当然所谓的转换我们也可以理解为变形，具体的变形属性有：

移动(translate)
旋转(rotate)
缩放(scale)

3.1、什么是2D转换？

2D转换是改变标签在二维平面上的位置和形状的一种技术，在这之前我们先要了解二维坐标系。

所谓的二维坐标系又与我们数学中的坐标系有点不一样！

2、2D 转换之移动（translate）

2D 移动是 2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform: translate(x,y);
/* 或者分开写 */
transform: translateX(n); /* n 也可以是百分比单位（相对于自身而言）*/
transform: translateY(n);

实例：

/* 移动一个盒子我们有三种选择方案：1.定位2.盒子的外边距3.2D转换-移动
*/
.box {width: 200px;height: 200px;background-color: skyblue;transform: translate(100px,50px); /* x轴方向移动 100px，y轴方向移动 50px*//* 1.如果我们只移动 x坐标 */transform: translate(20px,0);/* 或者 */transform: translateX(20px);/* 2.移动 y坐标同理 */
}

小结：

定义 2D 转换中的移动，沿着 x 和 y 轴移动元素
translate最大的优点：不会影响到其他元素的位置
translae中的百分比单位是相对于自身元素的。如transform: translate(50%,50%);
对行内标签没有效果

例如：

<!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>Document</title><style>div {width: 200px;height: 200px;}div:first-child {transform: translate(30px,30px);background-color: springgreen;}div:last-child {background-color: violet;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

效果图：

3、2D 转换之旋转

2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转。

语法：

transform: rotate(ndeg); /* 旋转n度，deg为旋转单位 */

实例：

<!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>Document</title><style>.box {width: 200px;height: 200px;/* 顺时针旋转 45度，负值就是逆时针 */transform: rotate(45deg);margin: auto;}.box img {width: 100%;height: 100%;}</style>
</head>
<body><div class="box"><img src="./image/pig.jpeg" alt=""></div>
</body>
</html>

效果：

配合过渡属性，我们可以做出意想不到的效果：

<!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>Document</title><style>.box {width: 200px;height: 200px;/* 顺时针旋转 45度，负值就是逆时针 */transform: rotate(45deg);margin: auto;}.box img {width: 100%;height: 100%;border: 2px solid purple;border-radius: 50%;}.box:hover img {transform: rotate(360deg);/* 过渡写到本身上，谁做动画给谁加 */transition: all 0.5s;}</style>
</head>
<body><div class="box"><img src="./image/pig.jpeg" alt=""></div>
</body>
</html>

鼠标移动图片上（旋转360度）：

小结：

rotate里面跟度数，单位是deg 比如 rotate(45deg)。
角度为正时，顺时针。负值时，为逆时针。
默认旋转的中心点是元素的中心点。

实例：不使用字体图标实现盒子内的小三角形（设置下边框和右边框、旋转45度）

代码实现：

<!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>Document</title><style>.box {position: relative;width: 200px;height: 30px;border: 1px solid #000;}.box::after {position: absolute;content: "";top: 6px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);}/* 鼠标经过时，小三角倒转 */.box:hover::after {/* transition: all 0.5s; */transform: rotate(225deg);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

4、设置旋转中心点（transform-origin）

经过上面的学习，2D旋转元素是，默认中心点就是元素的中心点，但是我们也可以通过transform-origin属性设置元素旋转的中心点！

语法：

transform-origin: x y;

注意：

参数 x 和 y 是用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给 x y 设置像素、方位名词(top bottom left right center)

实例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>Document</title><style>.box {width: 200px;height: 200px;background-color: blueviolet;margin: auto;transition: all 0.5s;/* 1.可以是方位名词 */transform-origin: left bottom; /* 左下角 *//* 2.默认是 50% 50%等价于 center center *//* 3.还可以是像素 */}.box:hover {transform: rotate(360deg);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

实例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>Document</title><style>.box {overflow: hidden;width: 200px;height: 200px;border: 1px solid rebeccapurple;margin: auto;}.box::after {content: "alex";display: block;width: 100%;height: 100%;background-color: royalblue;transform-origin: left bottom;transform: rotate(180deg);transition: all 0.5s;}.box:hover::after {transform: rotate(0deg);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

5、2D 转换之缩放 scale

缩放，顾明思议，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform: scale(x,y);

注意：

参数 x 和 y 用逗号分隔
transform: scale(1,1)宽和高都放大一倍，相对于没有放大。
transform: scale(2,2)宽和高都放大了2倍
transform: scale(2);只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform: scale(0.5,0.5);缩小
scale锁放最大的优势，可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

实例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>Document</title><style>.box {width: 100px;height: 100px;background-color: rebeccapurple;margin: auto;}.box:hover {/* 1.transform: scale(x,y); 里面写的数字不跟单位，就是倍数的意思 */transform: scale(2); /* 等价于 transform: scale(2,2);*//* 2.修改了宽度为原来的2倍，高度不变 *//* transform: scale(2,1); *//* 3.我们可以进行缩小，小于1就是缩放 *//* transform: scale(0.5,0.5); 或者 transform: scale(0.5); *//* 4.scale()的优点： 1.不会影响其他的盒子2.可以设置缩放的中心点*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>

实例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>Document</title><style>div {/* overflow: hidden; */width: 100px;height: 100px;float: left;margin: 10px;}div img {width: 100%;height: 100%;border: 1px solid rebeccapurple;}div img:hover {transform: scale(1.1);}</style>
</head>
<body><div><img src="./image/pig.jpeg" alt=""></div><div><img src="./image/pig.jpeg" alt=""></div><div><img src="./image/pig.jpeg" alt=""></div>
</body>
</html>

实例3：分页按钮

代码实现：

<!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>Document</title><style>ul li {float: left;width: 30px;height: 30px;list-style: none;border: 2px solid green;border-radius: 50%;font-size: 20px;margin: 10px 10px;text-align: center;line-height: 30px;}ul li:hover {transform: scale(1.1);}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body>
</html>

6、2D 转换综合写法

综合写法注意点：

同时使用多个转换，其格式为transform: translate() rotate() scale()等
其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前

例如：

<!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>Document</title><style>.box {width: 200px;height: 200px;background-color: greenyellow;transition: all 0.5s;margin: auto;}.box:hover {/* 我们同时有位移和其他属性，我们需要把位移放在最前面 */transform: translate(150px,50px) rotate(180deg) scale(1.2);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2D 转换总结：

转换transform我们简单理解就是变形有 2D 和 3D之分
我们暂且学了三个分别是位移、旋转、缩放
2D移动translate(x,y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
可以分开写比如translateX(x)和translateY(y)
2D转换rotate(度数)，可以实现旋转元素，度数的单位是deg
2D缩放sacle(x,y)，里面参数是数字不跟单位、可以是小数，最大的优势不影响其他盒子
设置转换中心点transform-origin: x y;参数可以百分比，像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前。

3.2、CSS3动画

动画（animation）也是css3中具有颠覆性的特征之一，可通过设置多个节点精确控制一个或一组动画，常用来实现复杂的动画效果。

相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

3.2.1、动画的基本使用

制作动画分为两步：

先定义动画
在使用（调用）动画

语法（定义）：使用keyframes定义动画（类似于定义类选择器）

@keyframes 动画名称 {0% {width: 100px; /* 0%：动画序列（总时间的划分） */}100% {width: 200px; /* 也可以使用 from to 代替*/}
}

语法（使用）：元素使用动画

div {/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间;
}

动画序列：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果、我们可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键字from和to，等同于0%和100%

实例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>Document</title><style>/* 我们想页面一打开，一个盒子就从左边走到右边 *//* 定义动画 */@keyframes move {/* 开始状态 */from {transform: translate(0px,0px);}/* 动画结束状态 */to {transform: translate(1200px,0px);}}.box {width: 200px;height: 200px;background-color: greenyellow;/* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 2s;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

实例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>Document</title><style>/* 1.可以做多个状态的变化 keyframe 译为 关键帧 *//* 2.里面的百分比，必须是整数 *//* 3.里面的百分比就是 总时间(我们这个案例10s) 的划分 */@keyframes move {0% {transform: translate(0px,0px);}25% {transform: translate(1200px,0px);}50% {transform: translate(1200px,500px);}75% {transform: translate(0px,500px);}100% {transform: translate(0px,0px);}}.box {width: 200px;height: 200px;background-color: greenyellow;/* 动画名称 */animation-name: move;animation-duration: 10s;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

3.2.2、动画的基本属性

1、常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了`animation-play-state`
animation-name	规定@keyframes动画的名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是`ease`
animaton-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的此时，默认是1，还有infinite
animation-direction	规定动画是否在下一个周期逆向播放，默认是`normal`，`alternate`是逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是`running`，还有`paused`
animation-fill-mode	规定动画结束后保持状态，保持`forwards`回到起始`backwards`

如：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(1000px, 0);}}div {width: 100px;height: 100px;background-color: pink;/* 动画名称 */animation-name: move;/* 持续时间 *//* animation-duration: 2s; *//* 运动曲线 *//* animation-timing-function: ease; *//* 何时开始 */animation-delay: 1s;/* 重复次数  iteration 重复的 conut 次数  infinite  无限 *//* animation-iteration-count: infinite; *//* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate *//* animation-direction: alternate; *//* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards *//* animation-fill-mode: forwards; *//* animation: name duration timing-function delay iteration-count direction fill-mode; *//* animation: move 2s linear 0s 1 alternate forwards; *//* 前面2个属性 name  duration 一定要写 *//* animation: move 2s linear  alternate forwards; */}div:hover {/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */animation-play-state: paused;}</style>
</head><body><div></div>
</body></html>

2、简写属性

语法：

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向播放 动画起始或者结束的状态;
/* 前面两个属性一定要写 */

如：

animation: myfirst 5s linear 2s infinite alternate;

注意：

简写属性里不包含animation-play-state
暂停动画：animation-play-state: puased;经常和鼠标经过等其他配合使用
想要动画回来，而不是直接跳回来：animation-direction: alternate
盒子动画结束后，停在结位置：animation-fill-mode: forwards

实例：热点图

代码实现：

<!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>Document</title><style>body {background-color: rgb(78, 76, 76);}.map {position: relative;width: 747px;height: 616px;background: url("image/map.png") no-repeat;margin: auto;}.map .city {position: absolute;top: 227px;right: 192px;color: #fff;}.map .city .dotted {width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.map .city div[class^="pulse"] {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;box-shadow: 0 0 12px #09f;border-radius: 50%;animation: pulse 1s linear infinite;}@keyframes pulse {0% {}70% {width: 40px;height: 40px;opacity: 1; /* 透明度 */}100% {width: 60px;height: 60px;opacity: 0;}}</style>
</head>
<body><div class="map"><div class="city"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"style="animation-delay: 0.4s;"></div><div class="pulse3"style="animation-delay: 0.8s;"></div></div></div>
</body>
</html>

3、速度曲线细节

animation-timing-function: 规定动画的速度曲线;默认是ease

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
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>Document</title><style>.box {width: 0;height: 30px;background-color: blueviolet;font-size: 20px;/* steps 就是分几步来完成我们的动画，有了steps 就不要在写 ease 或者 linear了 */animation: w 4s steps(10) forwards;overflow: hidden;/* 让我们的文字强制一行内显示 */white-space: nowrap;}@keyframes w {0% {}100% {width: 200px;}}</style>
</head>
<body><div class="box">我是乘风破浪的程序员</div>
</body>
</html>

实例1：奔跑的大熊。

素地址：https://gitee.com/xiaoqiang001/html_css_material/blob/master/CSS3%E8%BF%9B%E9%98%B6%E7%B4%A0%E6%9D%90-%E5%8C%85%E5%90%AB%E5%B0%8F%E7%86%8A%E5%8A%A8%E7%94%BB.rar

代码实现：

<!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>Document</title><style>body {background-color: #ccc;}.box {position: absolute;width: 200px;height: 100px;margin: 100px auto;background: url("image/bear.png") no-repeat;/* 我们元素可以添加多个动画，用逗号分隔 */animation: run 2s steps(8) infinite,move 3s forwards;}@keyframes run {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {from {left: 0;}to {left: 50%;/* margin-left: -100px; */transform: translateX(-50%);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

3.3、CSS3 3D转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

3D特点：

近大远小
物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能制作出3D效果。3D转换我能主要学习工作中最常见的 3D位移和3D旋转，在此之前我们先要了解三维坐标系。

3.3.1、三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的：

x轴：水平向右。注意：x右边是正直，左边是负值
y轴：垂直向下。注意：y下面是正直，上面是负值
z轴：垂直屏幕。注意：往外面是正直，往里面是负值

3.3.2、3D位移 translate3d(x,y,z)

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向：

transform: translateX(100px);仅仅是在x轴上移动
transform: translateY(100px);仅仅是在y轴上移动
transform: translateZ(100px);仅仅是在z轴上移动（注意：translateZ 一般用px单位）
transform: translate3d(x,y.z);其中x，y，z分别指要移动的轴的方向的距离。

如：

<!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>Document</title><style>.box {width: 200px;height: 200px;background-color: blueviolet;transform: translateX(100px) translateY(100px) translateZ(100px);/* 1. translateZ() 沿着z轴移动 *//* 2. translateZ() 后面的单位我们一般跟px*//* 3. translateZ() 向外移动100px *//* 4. 3D移动的简写方法： transform: translate3d(x,y,z); xyz是不能省略的，如果没有就写0 */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

3.3.3、3D旋转 rotate3d(x,y,z)

3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。

语法：

transform: rotateX(45deg); /* 沿着x轴正方向旋转45度*/
transform: rotateY(45deg); /* 沿着y轴正方向旋转45度*/
transform: rotateZ(45deg); /* 沿着Z轴正方向旋转45度*/
transform: rotate3d(x,y,z,deg); /* 沿着自定义轴旋转 deg 为角度（了解即可）*/

实例1：沿着x轴旋转

<!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>Document</title><style>.box {width: 200px;height: 200px;margin: 100px auto;perspective: 200px;}.box img {width: 100%;height: 100%;transition: all 1s;}.box:hover img {transform: rotateX(180deg);}</style>
</head>
<body><div class="box"><img src="image/pig.jpeg" alt=""></div>
</body>
</html>

对于元素旋转的方向的判断，我们需要先学习一个左手准则。

左手准则：

左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着 x轴旋转 的方向

实例2：沿着y轴旋转

我们的钢管舞就是沿着y轴旋转

旋转方向的判定还是遵循左手准则，不过在这里大拇指需要指向三维坐标系的y轴！

实例3：沿着z轴旋转，z轴的旋转与2D的旋转一样。

3.3.4、透视 perspective

在2D平面产生近大远小视觉立体，但是效果只是二维的：

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可以认为安排一只眼睛去看。
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

注意：透视属性写在被观察元素的父盒子上面

d就是视距，视据就是一个距离人的眼睛到屏幕的距离
z就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

例如：

<!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>Document</title><style>body {/* 透视写到被观察元素的父盒子上面 */perspective: 500px; /* 透视也称视距，值越小，盒子就越大 */}.box {width: 200px;height: 200px;margin: 100px auto;background-color: greenyellow;transform: translate3d(100px,50px,100px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果就是，盒子因为视距的改变而撑大了盒子

3.3.5、3D 呈现 transform-style

transform-style CSS属性指定元素的子元素是定位在3d空间中还是在元素平面中被平铺。如果扁平化，子元素将不会在三维空间中独立存在。

控制子元素是否开启三维立体环境
transform-style: flat;子元素不开启3d立体空间默认值
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>Document</title><style>.box {position: relative;width: 200px;height: 200px;margin: 100px auto;perspective: 500px;transform-style: preserve-3d; /* 子元素开启立体空间 */transition: all 1s;}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: greenyellow;}.box div:last-child {transform: rotateX(60deg);background-color: rebeccapurple;}.box:hover {transform: rotateY(60deg);}</style>
</head>
<body><div class="box"><div></div><div></div></div>
</body>
</html>

实例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>Document</title><style>.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 0.5s;transform-style: preserve-3d;}.box .front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;text-align: center;line-height: 200px;font-size: 20px;color: cornsilk;}.box .front {background-color: blueviolet;z-index: 1;}.box .back {background-color: rgb(231, 141, 38);transform: rotateY(180deg);}.box:hover {transform: rotateY(180deg);}</style>
</head>
<body><div class="box"><div class="front">hello</div><div class="back">world</div></div>
</body>
</html>

实例3：3D导航栏

代码实现：

<!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>Document</title><style>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {float: left;width: 120px;height: 35px;list-style: none;text-align: center;line-height: 35px;font-size: 14px;perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all 0.5s;}.box .front,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.box .front {background-color: gold;z-index: 1;transform: translateZ(17.5px);}.box .bottom {background-color: rebeccapurple;color: seashell;/* 我们如果有移动或者其他样式，必须先写我们的移动 */transform: translateY(17.5px) rotateX(-90deg); /* 这个x轴一定是负值 */}.box:hover {transform: rotateX(90deg);}</style>
</head>
<body><ul><li><div class="box"><div class="front">首页</div><div class="bottom">点击进入</div></div></li><li><div class="box"><div class="front">首页</div><div class="bottom">点击进入</div></div></li><li><div class="box"><div class="front">首页</div><div class="bottom">点击进入</div></div></li><li><div class="box"><div class="front">首页</div><div class="bottom">点击进入</div></div></li></ul>
</body>
</html>

3.4、动画属性综合案例：旋转木马

代码实现：

<!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>Document</title><style>body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;margin: 100px auto;transform-style: preserve-3d;/* 添加动画 */animation: rotate 15s linear infinite;background: url("image/j.jpg");}section:hover {/* 鼠标放入section 停止动画 */animation-play-state: paused;}section div {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}section div img {width: 100%;height: 100%;}section div:nth-child(1) {transform: rotateY(0) translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}</style>
</head>
<body><section><div><img src="./image/mj.jpg" alt=""></div><div><img src="./image/mj.jpg" alt=""></div><div><img src="./image/mj.jpg" alt=""></div><div><img src="./image/mj.jpg" alt=""></div><div><img src="./image/mj.jpg" alt=""></div><div><img src="./image/mj.jpg" alt=""></div></body>
</html>

End

Thank you for watching

End