HTML5的新个性
HTML5 的新增个性次要是针对于以前的有余，减少了一些新的标签、新的表单和新的表单属性等。
这些新个性都有兼容性问题，根本是 IE9+ 以上版本的浏览器才反对，如果不思考兼容性问题（例如：挪动端），便能够大量应用这些新个性。
语义化标签
以前布局，咱们根本用 div 来做。div 对于搜索引擎来说，是没有语义的。
<div class=“header”> </div><div class=“nav”> </div><div class=“content”> </div><div class=“footer”> </div><header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档的某个区域<aside>：侧边栏标签<footer>：尾部标签
留神：
- 这种语义化规范次要是针对搜索引擎的
- 这些新标签页面中能够应用屡次
- 在 IE9 中，须要把这些元素转换为块级元素
- 其实，咱们挪动端更喜爱应用这些标签
- HTML5 还减少了很多其余标签，咱们前面再缓缓学
<!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>HTML5新增语义化标签</title> <style> header, nav { height: 120px; background-color: pink; border-radius: 15px; width: 800px; margin: 15px auto; } section { width: 500px; height: 300px; background-color: skyblue; } </style></head><body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section></body></html>多媒体标签
新增的多媒体标签次要蕴含两个：
- 音频：
<audio> - 视频：
<video>
应用它们能够很不便的在页面中嵌入音频和视频，而不再去应用 flash 和其余浏览器插件。
视频
HTML5 在不应用插件的状况下，也能够原生的反对视频格式文件的播放。当然，反对的格局是无限的。
以后 <video> 元素反对三种视频格式：尽量应用 mp4 格局。
HTML <video> 标签
语法：
<video src="文件地址" controls="controls"></video><video controls="controls" width="300"> <source src="move.ogg" type="video/ogg"> <source src="move.mp4" type="video/mp4"> 您的浏览器暂不反对 <video> 标签播放视频</ video >| 属性 | 值 | 形容 |
|---|---|---|
| autoplay | autoplay | 如果呈现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果呈现该属性，则向用户显示控件，比方播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果呈现该属性，则当媒介文件实现播放后再次开始播放。 |
| muted | muted | 如果呈现该属性，视频的音频输入为静音。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
| preload | auto metadata none | 如果呈现该属性，则视频在页面加载时进行加载，并准备播放。如果应用 "autoplay"，则疏忽该属性。 |
| src | URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
音频
HTML5 在不应用插件的状况下，也能够原生的反对音频格式文件的播放。当然，反对的格局是无限的。
以后 <audio> 元素反对三种音频格式：尽量应用 mp3 格局。
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
语法：
<audio src="文件地址" controls="controls"></audio><audio controls="controls"> <source src="happy.mp3" type="audio/mpeg"> <source src="happy.ogg" type="audio/ogg"> 您的浏览器暂不反对 <audio> 标签。</audio>属性：
| 属性 | 值 | 形容 |
|---|---|---|
| autoplay | autoplay | 如果呈现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果呈现该属性，则向用户显示音频控件（比方播放/暂停按钮）。 |
| loop | loop | 如果呈现该属性，则每当音频完结时从新开始播放。 |
| muted | muted | 如果呈现该属性，则音频输入为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
多媒体标签总结
- 浏览器反对状况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 咱们能够给视频标签增加 muted 属性来静音播放视频，音频不能够（能够通过 JavaScript 解决）
- 视频标签是重点，咱们常常设置自动播放，不应用 controls 控件，循环和设置大小属性
input类型
<!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></head><body><!-- 咱们验证的时候必须增加form表单域 --><form action=""> <ul> <li>邮箱: <input type="email"/></li> <li>网址: <input type="url"/></li> <li>日期: <input type="date"/></li> <li>工夫: <input type="time"/></li> <li>数量: <input type="number"/></li> <li>手机号码: <input type="tel"/></li> <li>搜寻: <input type="search"/></li> <li>色彩: <input type="color"/></li> <!-- 当咱们点击提交按钮就能够验证表单了 --> <li><input type="submit" value="提交"></li> </ul></form></body></html>input表单属性
批改placeholder字体色彩
input::placeholder { color: hotpink;}<!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>HTML5新增表单属性</title> <style> input::placeholder { color: hotpink; } </style></head><body><form action=""> <input type="search" name="sear" id="one" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off"> <input type="file" name="" id="two" multiple="multiple"> <input type="submit" value="提交"></form></body></html>CSS3新个性
新增的 CSS3 个性有兼容性问题，IE9+ 才反对，挪动端反对优于 PC 端。
新增选择器
属性选择器
属性选择器能够依据元素特定属性来抉择元素。这样就能够不必借助于类或者 id 选择器。
| 选择符 | 简介 |
|---|---|
E[att] | 抉择具备 att 属性的 E 元素 |
E[att="val"] | 抉择具备 att 属性且属性值等于 val 的 E 元素 |
E[att^="val"] | 匹配具备 att 属性且值以 val 结尾的 E 元素 |
E[arr$="val"] | 匹配具备 att 属性且值以 val 结尾的 E 元素 |
E[att*="val"] | 匹配具备 att 属性且值中含有 val 的 E 元素 |
留神：类选择器、属性选择器、伪类选择器，权重都是10。
<!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>CSS3新增属性选择器</title> <style> /* 必须是 input 同时具备 value 这个属性抉择这个元素[] */ /*input[value] {*/ /* color: hotpink;*/ /*}*/ /* 只抉择 type=text 文本框的 input 选取进去 */ input[type=text] { color: hotpink; } /* 抉择首先是 div 而后具备 class 属性，并且属性值必须是 icon 结尾的这些元素 */ div[class^=icon] { color: red; } /* 抉择首先是 section 而后具备 class 属性，并且属性值必须是 data 结尾的这些元素 */ section[class$=data] { color: blue; } /* 类选择器 属性选择器 伪类选择器 权重都是 10 */ div.icon1 { color: skyblue; } </style></head><body><!-- 1. 利用属性选择器就能够不必借助于类或者 id 选择器 --><!--<input type="text" value="请输出用户名">--><!--<input type="text">--><!-- 2. 属性选择器还能够抉择属性=值的某些元素 重点务必把握 --><input type="text" name="" id="one"><input type="password" name="" id="two"><!-- 3. 属性选择器能够抉择属性值结尾的某些元素 --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><div>我是打酱油的</div><!-- 4. 属性选择器能够抉择属性值结尾的某些元素 --><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">哪我是谁</section></body></html>构造伪类选择器
构造伪类选择器次要依据文档构造来抉择元素，罕用于依据父级来抉择其子元素。
- n 能够是数字，关键字和公式
- n 如果是数字，就是抉择第 n 个子元素，外面数字从 1 开始……
- n 能够是关键字：even 偶数，odd 奇数
- n 能够是公式：常见的公式如下（如果 n 是公式，则从 n = 0 开始计算，然而第 0 个元素和超出了元素的个数会被疏忽）
| 公式 | 取值 |
|---|---|
2n | 偶数（2、4、6、……） |
2n+1 | 奇数（1、3、5、……） |
5n | 5 10 15... |
n+5 | 从第 5 个开始（蕴含第 5 个）到最初 |
-n+5 | 前 5 个（蕴含第 5 个） |
构造伪类选择器次要依据文档构造来抉择元素，罕用于依据父级来抉择其子元素。
| 选择器 | 简介 |
|---|---|
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 个 |
nth-child(n) 抉择某个父元素的一个或多个特定的子元素（重点）。
- n 能够是数字，关键字和公式
- n 如果是数字，就是抉择第 n 个子元素，外面数字从 1 开始……
- n 能够是关键字：even 偶数，odd 奇数
- n 能够是公式：常见的公式如下（如果 n 是公式，则从 n = 0 开始计算，然而第 0 个元素和超出了元素的个数会被疏忽）
| 公式 | 取值 |
|---|---|
2n | 偶数（2、4、6、……） |
2n+1 | 奇数（1、3、5、……） |
5n | 5 10 15... |
n+5 | 从第 5 个开始（蕴含第 5 个）到最初 |
-n+5 | 前 5 个（蕴含第 5 个） |
区别：
- nth-child 对父元素外面所有孩子排序抉择（序号是固定的） 先找到第 n 个孩子，而后看看是否和 E 匹配
- nth-of-type 对父元素外面指定子元素进行排序抉择。 先去匹配 E，而后再依据 E 找第 n 个孩子
小结：
- 构造伪类选择器个别用于抉择父级外面的第几个孩子
- nth-child 对父元素外面所有孩子排序抉择（序号是固定的） 先找到第 n 个孩子，而后看看是否和 E 匹配
- nth-of-type 对父元素外面指定子元素进行排序抉择。 先去匹配 E，而后再依据 E 找第 n 个孩子
- 若父元素内都是同一种标签（如：列表），优先用 nth-child，否则就只能应用 nth-of-type
- 类选择器、属性选择器、伪类选择器，权重为 10
<!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>CSS3新增构造伪类选择器</title> <style> /* 1. 抉择 ul 外面的第一个孩子 小 li */ ul li:first-child { background-color: pink; } /* 2. 抉择 ul 外面的最初一个孩子 小 li */ ul li:last-child { background-color: pink; } /* 3. 抉择 ul 外面的第 2 个孩子 小 li */ ul li:nth-child(2) { background-color: skyblue; } /* 3. 抉择 ul 外面的第 6 个孩子 小 li */ ul li:nth-child(6) { background-color: skyblue; } </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> <li>我是第8个孩子</li></ul></body></html>伪元素选择器
伪元素选择器能够帮忙咱们利用 CSS 创立新标签元素，而不须要 HTML 标签，从而简化 HTML 构造。
| 选择器 | 简介 |
|---|---|
::before | 在元素内容的后面插入内容 |
::after | 在元素内容的前面插入内容 |
留神：
- before 和 after 创立一个元素，属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以咱们称为伪元素
- 语法：
element::before{} - before 和 after 必须有 content 属性
- before 在父元素内容的后面创立元素，after 在父元素内容的前面创立元素
- 伪元素选择器和标签选择器一样，权重为 1
（1）伪元素选择器应用场景1：伪元素字体图标
p::before { position: absolute; right: 20px; top: 10px; content: '\e91e'; font-size: 20px;}<!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>伪元素选择器应用场景-字体图标</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border: 1px solid red; } div::after { position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* content: ''; */ content: '\e91e'; color: red; font-size: 18px; } </style></head><body><div></div></body></html>（2）伪元素选择器应用场景2：仿土豆成果
/* 当咱们鼠标通过了 土豆这个盒子，就让外面 before 遮罩层显示进去 */.tudou:hover::before { /* 而是显示元素 */ display: block;}（3）伪元素选择器应用场景3：伪元素革除浮动
- 额定标签法也称为隔墙法，是 W3C 举荐的做法
- 父级增加 overflow 属性
- 父级增加 after 伪元素
- 父级增加双伪元素
额定标签法也称为隔墙法，是 W3C 举荐的做法。
留神：要求这个新的空标签必须是块级元素。
前面两种伪元素革除浮动算是第一种额定标签法的一个降级和优化。
.clearfix:after { content: ""; /* 伪元素必须写的属性 */ display: block; /* 插入的元素必须是块级 */ height: 0; /* 不要看见这个元素 */ clear: both; /* 外围代码革除浮动 */ visibility: hidden; /* 不要看见这个元素 */}.clearfix:before,.clearfix:after { content: ""; display: table; /* 转换为块级元素并且一行显示 */}.clearfix:after { clear: both;}盒子模型
CSS3 中能够通过 box-sizing 来指定盒模型，有 2 个值：即可指定为 content-box、border-box，这样咱们计算盒子大小的形式就产生了扭转。
能够分成两种状况：
- box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
- 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 name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3盒子模型</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } div { width: 200px; height: 200px; background-color: pink; border: 20px solid red; padding: 15px; box-sizing: content-box; } p { width: 200px; height: 200px; background-color: pink; border: 20px solid red; padding: 15px; /* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */ box-sizing: border-box; } </style></head><body><div> 小猪乔治</div><p> 小猪佩奇</p></body></html>过渡
过渡（transition）是 CSS3 中具备颠覆性的特色之一，咱们能够在不应用 Flash 动画或 JavaScript 的状况下，当元素从一种款式变换为另一种款式时为元素增加成果。
过渡动画：是从一个状态慢慢的过渡到另外一个状态。
能够让咱们页面更好看，更动感十足，尽管低版本浏览器不反对（IE9 以下版本） 然而不会影响页面布局。
咱们当初常常和 :hover 一起搭配应用。
语法：
transition: 要过渡的属性 破费工夫 静止曲线 何时开始;- 属性：想要变动的 css 属性，宽度高度、背景色彩、内外边距都能够 。如果想要所有的属性都变动过渡，写一个
all就能够 - 破费工夫：单位是秒（必须写单位）比方
0.5s - 静止曲线：默认是
ease（能够省略） - 何时开始：单位是秒（必须写单位）能够设置提早触发工夫默认是
0s（能够省略）
记住过渡的应用口诀：谁做过渡给谁加！
<!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>CSS3过渡成果</title> <style> div { width: 200px; height: 100px; background-color: black; /* transition: 变动的属性 破费工夫 静止曲线 何时开始; */ /* transition: width .5s ease 0s, height .5s ease 1s; */ /* 如果想要写多个属性，利用逗号进行宰割 */ /* transition: width .5s, height .5s; */ /* 如果想要多个属性都变动，属性写 all 就能够了 */ /* transition: height .5s ease 1s; */ /* 谁做过渡，给谁加 */ transition: all 0.5s; } div:hover { width: 400px; height: 200px; background-color: gray; } </style></head><body><div></div></body></html>其余个性
图片变含糊
<!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>图片含糊解决filter</title> <style> img { /* blur 是一个函数 小括号外面数值越大，图片越含糊 留神数值要加 px 单位 */ filter: blur(15px); } img:hover { filter: blur(0); } </style></head><body><img src="images/pink.jpg" alt=""></body></html>计算盒子宽度 width:calc 函数
<!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>CSS3属性calc函数</title> <style> .father { width: 500px; height: 500px; background-color: black; } .son { /* width: 300px; */ /* width: calc(500px - 100px); */ width: calc(100% - 100px); height: 200px; background-color: salmon; } </style></head><body><!-- 需要：咱们的子盒子宽度永远比父盒子小 100 像素 --><div class="father"> <div class="son"></div></div></body></html>CSS3进步
2D转换
转换（transform）是 CSS3 中具备颠覆性的特色之一。能够实现元素的位移、旋转、缩放等成果。
转换（transform）你能够简略了解为变形。
- 挪动：translate
- 旋转：rotate
- 缩放：scale
二维坐标系
2D 转换是扭转标签在二维立体上的地位和形态的一种技术，先来学习二维坐标系。
挪动 translate
语法：
transform: translate(x, y); /* 或者离开写 */transform: translateX(n);transform: translateY(n);重点：
- 定义 2D 转换中的挪动，沿着 X 和 Y 轴挪动元素
- translate 最大的长处：不会影响到任何其余元素的地位（优于定位的中央）
- translate 中的百分比单位是绝对于本身元素的 translate: (50%, 50%);
- 对行内元素没有成果
<!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>2D转换之挪动translate</title> <style> /* 挪动盒子的地位：定位、盒子的外边距、2D转换挪动 */ div { width: 200px; height: 200px; background-color: hotpink; /* x就是x轴上挪动地位，y就是y轴上挪动地位，两头用逗号分隔 */ /* transform: translate(x, y); */ /* transform: translate(100px, 100px); */ /* 1. 只挪动x坐标 */ /* transform: translate(100px, 0); */ /* transform: translateX(100px); */ /* 2. 只挪动y坐标 */ /* transform: translate(0, 100px); */ /* transform: translateY(100px); */ } div:first-child { transform: translate(30px, 30px); } div:last-child { background-color: black; } </style></head><body> <div></div> <div></div></body></html>n
案例2：让一个盒子程度居中
<!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>让一个盒子程度居中</title> <style> * { margin: 0; padding: 0; } div { position: relative; width: 500px; height: 500px; background-color: hotpink; /* 1. 咱们 tranlate 外面的参数是能够用 % */ /* 2. 如果外面的参数是 % 那么挪动的间隔是以盒子本身的宽度或者高度来比照的 */ /* 这里的 50% 就是 250px 因为盒子的宽度是 500px */ /* transform: translateX(50%); */ } p { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: black; /* 在后面的定位中应用间接减去本身宽度与高度的一半，此种形式的毛病在于不能随盒子大小的变动而变动 margin-top: -100px; margin-left: -100px; */ transform: translate(-50%, -50%); } span { /* translate 对于行内元素是有效的 */ transform: translate(300px, 300px); } </style></head><body><div> <p></p></div><span>123</span></body></html>旋转 rotate
2D 旋转指的是让元素在 2 维立体内顺时针旋转或者逆时针旋转。
语法：
transform: rotate(度数)重点：
- rotate 外面跟度数，单位是 deg，比方 rotate(45deg)
- 角度为正时，顺时针；负时，逆时针
- 默认旋转的中心点是元素的中心点
案例：图片旋转360度
<!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>2D转换之旋转rotate</title> <style> img { width: 150px; /* 顺时针旋转45度 */ /* transform: rotate(45deg); */ border-radius: 50%; border: 5px solid pink; /* 过渡写到自身上，谁做动画给谁加 */ transition: all 0.5s; } img:hover { transform: rotate(360deg); } </style></head><body><img src="media/pic.jpg" alt=""></body></html>案例：旋转箭头
<!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>旋转三角</title> <style> div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } /* 三角能够通过盒子来制作，不肯定非得字体图标 */ /* 让一个旋转45度的正方形（菱形）的两个边框显示进去 */ div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s; } /* 鼠标通过 div 外面的三角旋转 */ div:hover::after { transform: translate(0%,50%) rotate(225deg); } </style></head><body><div></div></body></html>转换中心点 transform-origin
咱们能够设置元素转换的中心点。
语法：
transform-origin: x y;重点：
- 留神前面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点（50% 50%）
- 还能够给 x y 设置 像素 或者 方位名词（top bottom left right center）
<!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>transform-origin</title> <style> div { width: 100px; height: 100px; background-color: pink; margin: 100px auto; transition: all 1s; /* 1.能够跟方位名词 */ /* transform-origin: left bottom; */ /* 2. 默认的是 50% 50% 等价于 center center */ /* 3. 能够是 px 像素 */ transform-origin: 25px 25px; } div:hover { transform: rotate(360deg); } </style></head><body><div></div></body></html><!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>旋转中心点</title> <style> div { /* 溢出暗藏 */ overflow: hidden; width: 200px; height: 200px; border: 1px solid pink; margin: 10px; float: left; } div::before { content: "黑马"; display: block; width: 100%; height: 100%; background-color: hotpink; transform: rotate(180deg); transform-origin: left bottom; transition: all 0.4s; } /* 鼠标通过 div 外面的 before 还原 */ div:hover::before { transform: rotate(0deg); } </style></head><body><div></div><div></div><div></div></body></html>缩放 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 缩放最大的劣势：能够设置缩放的基准点（默认以中心点缩放）；并且缩放不会影响其余盒子的地位（以上两个特点都是间接设置 width 和 height 都无奈做到的）
<!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>2D转换之缩放</title> <style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; /* 能够设置缩放的中心点 */ /* transform-origin: left bottom; */ } div:hover { /* 1. 外面写的数字不跟单位 就是倍数的意思， 1 就是 1 倍；2 就是 2 倍 */ /* transform: scale(x, y); */ /* transform: scale(2, 2); */ /* 2. 批改了宽度为原来的 2 倍，高度不变 */ /* transform: scale(2, 1); */ /* 3. 等比例缩放 同时批改宽度和高度，咱们有简略的写法以下是宽度批改了 2 倍，高度默认和第一个参数一样 */ /* transform: scale(2); */ /* 4. 咱们能够进行放大，小于 1就是放大 */ /* transform: scale(0.5, 0.5); */ /* transform: scale(0.5); */ /* 5. scale 的劣势之处：不会影响其余的盒子，而且能够设置缩放的中心点 */ /* 间接设置宽高时无奈做到以上长处的！ width: 300px; height: 300px; */ transform: scale(2); } </style></head><body> <div></div></body></html>案例：图片放大
<!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>图片放大案例</title> <style> div { width: 225px; height: 137px; overflow: hidden; float: left; margin: 10px; } div img { transition: all .4s; } div img:hover { transform: scale(1.1); } </style></head><body><div> <a href="#"><img src="media/scale.jpg" alt=""></a></div><div> <a href="#"><img src="media/scale.jpg" alt=""></a></div><div> <a href="#"><img src="media/scale.jpg" alt=""></a></div></body> </html>综合写法
留神：
- 同时应用多个转换，其格局为：
transform: translate() rotate() scale()...等 - 其程序会影转换的成果。（先旋转会扭转坐标轴方向）
- 当咱们同时有位移和其余属性的时候，记得要将位移放到最前
<!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> div { width: 200px; height: 200px; background-color: pink; transition: all 1s; } div:hover { /* transform: rotate(180deg) translate(150px, 50px); */ /* 咱们同时有位移和其余属性，咱们须要把位移放到最后面 */ transform: translate(150px, 50px) rotate(180deg) scale(1.2); } </style></head><body><div></div></body></html>总结
- 2D 挪动 translate(x, y) 最大的劣势是不影响其余盒子，外面参数用 %，是绝对于本身宽度和高度来计算的
- 2D 旋转 rotate(度数) 能够实现旋转元素，度数的单位是 deg
- 2D 缩放 sacle(x, y) 外面参数是数字，不跟单位，能够是小数。最大的劣势在于不影响其余盒子
- 设置转换中心点 transform-origin : x y; 参数能够百分比、像素或者是方位名词
- 当咱们进行综合写法，同时有位移和其余属性的时候，记得要将位移放到最前
动画
动画（animation）是 CSS3 中具备颠覆性的特色之一，可通过设置多个节点来准确管制一个或一组动画，罕用来实现简单的动画成果。
相比拟过渡，动画能够实现更多变动，更多管制，间断自动播放等成果。
根本应用
制作动画分为两步：
- 先定义动画
- 再应用（调用）动画
用 keyframes 定义动画（相似定义类选择器）
@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px; }}动画序列
- 0% 是动画的开始，100% 是动画的实现。这样的规定就是动画序列
- 在 @keyframes 中规定某项 CSS 款式，就能创立由以后款式逐步改为新款式的动画成果
- 动画是使元素从一种款式逐步变动为另一种款式的成果。您能够扭转任意多的款式任意多的次数
- 请用百分比来规定变动产生的工夫，或用关键词 "from" 和 "to"，等同于 0% 和 100%
元素应用动画
div { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间;}<!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>CSS3动画的根本应用</title> <style> /* 咱们想页面一关上，一个盒子就从右边走到左边 */ /* 1. 定义动画 */ @keyframes move { /* 开始状态 */ 0% { transform: translateX(0px); } /* 完结状态 */ 100% { transform: translateX(1000px); } } div { width: 200px; height: 200px; background-color: pink; /* 2. 调用动画 */ /* 动画名称 */ animation-name: move; /* 持续时间 */ animation-duration: 2s; } </style></head><body><div></div></body></html><!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>动画序列</title> <style> /* from to 等价于 0% 和 100% */ /* @keyframes move { from { transform: translate(0, 0); } to { transform: translate(1000px, 0); } } */ /* 动画序列 */ /* 1. 能够做多个状态的变动 keyframe 关键帧 */ /* 2. 外面的百分比要是整数 */ /* 3. 外面的百分比就是 总的工夫（咱们这个案例 10s）的划分 25% * 10 = 2.5s */ @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(1000px, 0) } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0, 0); } } div { width: 100px; height: 100px; background-color: pink; animation-name: move; animation-duration: 10s; } </style></head><body><div></div></body></html>动画罕用属性
| 属性 | 形容 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state 属性 |
| animation-name | 规定 @keyframes 动画的名称（必须的） |
| animation-duration | 规定动画实现一个周期所破费的秒或毫秒，默认是 0（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是 “ease” |
| animation-delay | 规定动画何时开始，默认是 0 |
| animation-iteration-count | 规定动画被播放的次数，默认是 1，还有 infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused" |
| animation-fill-mode | 规定动画完结后状态，放弃 forwards 回到起始 backwards |
动画简写属性
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 name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>动画属性</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>案例：热点图
<!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>大数据热点图</title> <style> body { background-color: #333; } .city { position: absolute; top: 100px; left: 100px; color: #fff; } .dotted { width: 8px; height: 8px; background-color: #09f; border-radius: 50%; } .city div[class^="pulse"] { /* 保障咱们小波纹在父盒子外面程度垂直居中 放大之后就会核心向周围发散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pulse 1.2s linear infinite; } .city div.pulse2 { animation-delay: 0.4s; } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse { 0% { } 70% { /* transform: scale(5); 咱们不要用scale 因为他会让 暗影变大*/ width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style></head><body><div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div></div></body></html>速度曲线
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 name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>速度曲线步长</title> <style> div { overflow: hidden; font-size: 20px; width: 0; height: 30px; background-color: pink; /* 让咱们的文字强制一行内显示 */ white-space: nowrap; /* steps 就是分几步来实现咱们的动画 有了 steps 就不要在写 ease 或者 linear 了 */ animation: w 4s steps(10) forwards; } @keyframes w { 0% { width: 0; } 100% { width: 200px; } } </style></head><body><div>我在这里等你</div></body></html><!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>奔跑的熊大案例</title> <style> body { background-color: #ccc; } div { position: absolute; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 咱们元素能够增加多个动画，用逗号分隔 */ animation: bear .4s steps(8) infinite, move 3s forwards; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 50%; /* margin-left: -100px; */ transform: translateX(-50%); } } </style></head><body><div></div></body></html>案例：奔跑的熊
<!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>奔跑的熊大案例</title> <style> body { background-color: #ccc; } div { position: absolute; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 咱们元素能够增加多个动画，用逗号分隔 */ animation: bear .4s steps(8) infinite, move 3s forwards; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 50%; /* margin-left: -100px; */ transform: translateX(-50%); } } </style></head><body><div></div></body></html>3D转换
咱们生存的环境是 3D 的，照片就是 3D 物体在 2D 立体出现的例子。
有什么特点
- 近大远小
- 物体前面遮挡不可见
当咱们在网页上构建 3D 成果的时候参考这些特点就能产出 3D 成果。
三维坐标系
- x 轴：程度向右（留神：x 左边是正值，右边是负值）
- y 轴：垂直向下（留神：y 上面是正值，下面是负值）
- z 轴：垂直屏幕（留神：往外面是正值，往里面是负值）
3D 转换咱们次要学习工作中最罕用的 3D 位移 和 3D 旋转。
次要知识点
- 3D 位移：translate3d(x, y, z)
- 3D 旋转：rotate3d(x, y, z)
- 透视：perspective
- 3D 出现：transfrom-style
3D挪动 translate3d
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 别离指要挪动的轴的方向的间隔
因为 z 轴是垂直屏幕，由里指向里面，所以默认是看不到元素在 z 轴的方向上挪动（要借助透视）。
透视 perspective
在 2D 立体产生近大远小视觉平面，然而成果只是二维的。
- 如果想要在网页产生 3D 成果须要透视（了解成 3D 物体投影在 2D 立体内）
- 模仿人类的视觉地位，可认为安顿一只眼睛去看
- 透视咱们也称为视距：视距就是人的眼睛到屏幕的间隔
- 间隔视觉点越近的，在电脑立体成像越大，越远成像越小
- 透视的单位是像素
透视写在被察看元素的父盒子下面。
d：就是视距，视距就是一个间隔人的眼睛到屏幕的间隔。
z：就是 z 轴，物体间隔屏幕的间隔，z 轴越大（正值）咱们看到的物体就越大。
<!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>3D挪动translate3d</title> <style> body { /* 透视写到被察看元素的父盒子下面 */ perspective: 200px; } div { width: 200px; height: 200px; background-color: pink; /* transform: translateX(100px) translateY(100px) translateZ(100px); */ /* 1. translateZ 沿着 Z 轴挪动 */ /* 2. translateZ 前面的单位咱们个别跟 px */ /* 3. translateZ(100px) 向外挪动 100px（向咱们的眼睛来挪动的） */ /* 4. 3D 挪动有简写的办法 */ /* transform: translate3d(x, y, z); */ /* transform: translate3d(100px, 100px, 100px); */ /* 5. xyz 是不能省略的，如果没有就写 0 */ transform: translate3d(400px, 100px, 100px); } </style></head><body><div></div></body></html>translateZ
translform:translateZ(100px)：仅仅是在 Z 轴上挪动。有了透视，就能看到 translateZ 引起的变动了。
- translateZ：近大远小
- translateZ：往外是正值
- translateZ：往里是负值
<!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>translateZ</title> <style> body { perspective: 500px; } div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transform: translateZ(0); } </style></head><body><div></div><div></div><div></div></body></html>3D旋转 rotate3d
3D旋转指能够让元素在三维立体内沿着 x轴，y轴，z轴或者自定义轴进行旋转。
语法
- transform: rotateX(45deg)：沿着 x 轴正方向旋转 45 度
- transform: rotateY(45deg)：沿着 y 轴正方向旋转 45deg
- transform: rotateZ(45deg)：沿着 z 轴正方向旋转 45deg
- transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转 deg 为角度（理解即可）
对于元素旋转的方向的判断，咱们须要先学习一个左手准则。
X轴左手准则
- 左手的手拇指指向 x 轴的正方向
- 其余手指的蜿蜒方向就是该元素沿着 x 轴旋转的方向
<!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>rotateX</title> <style> body { /* 利用透视产生近大远小成果 */ perspective: 300px; background: #DDDDDD; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateX(45deg); } </style></head><body><img src="media/pic.jpg" alt=""></body></html>Y轴左手准则
- 左手的手拇指指向 y 轴的正方向
- 其余手指的蜿蜒方向就是该元素沿着 y 轴旋转的方向（正值）
<!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>rotateY</title> <style> body { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateY(45deg); } </style></head><body><img src="media/pic.jpg" alt=""></body></html><!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>rotateZ</title> <style> body { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateZ(180deg); } </style></head><body><img src="media/pig.jpg" alt=""></body></html>transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转 deg 为角度（理解即可）。
xyz 是示意旋转轴的矢量，示意你是否心愿沿着该轴旋转，最初一个示意旋转的角度。
- transform: rotate3d(1, 0, 0, 45deg)：就是沿着 x 轴旋转 45deg
- transform: rotate3d(0, 1, 0, 45deg)：就是沿着 y 轴旋转 45deg
- transform: rotate3d(0, 0, 1, 45deg)：就是沿着 z 轴旋转 45deg
- transform: rotate3d(1, 1, 0, 45deg)：就是沿着对角线（矢量计算）旋转 45deg
<!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>rotate3d</title> <style> body { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { /* transform: rotate3d(x,y,z,deg); */ /* transform: rotate3d(1, 0, 0, 45deg); */ /* transform: rotate3d(0, 1, 0, 45deg); */ transform: rotate3d(1, 1, 0, 45deg); } </style></head><body><img src="media/pig.jpg" alt=""></body></html>3D出现 transfrom-style
管制子元素是否开启三维平面环境
transform-style: flat子元素不开启 3d 平面空间（默认的）transform-style: preserve-3d;子元素开启平面空间
- 代码写给父级，然而影响的是子盒子
- 这个属性很重要，前面必用
<!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>transform-style</title> <style> body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 2s; /* 让子元素放弃3d平面空间环境 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(60deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .box div:last-child { background-color: purple; transform: rotateX(60deg); } </style></head><body><div class="box"> <div></div> <div></div></div></body></html>案例：两面翻转的盒子
- li 设置大小，加透视和 3d 出现
- front 须要前移 17.5 像素
- bottom 须要下移 17.5 像素并且要沿着 x 轴翻转 负 90 度
- 鼠标放到 box 让盒子旋转 90 度
<!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>3D导航栏案例</title> <style> * { margin: 0; padding: 0; } ul { margin: 100px; } ul li { float: left; margin: 0 5px; width: 120px; height: 35px; list-style: none; /* 一会咱们须要给 box 旋转 也须要透视 罗唆给 li 加 外面的子盒子都有透视成果 */ perspective: 500px; } .box { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .4s; } .box:hover { transform: rotateX(90deg); } .front, .bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .front { background-color: pink; z-index: 1; transform: translateZ(17.5px); } .bottom { background-color: purple; /* 这个x轴肯定是负值 */ /* 咱们如果有挪动 或者其余款式，必须先写咱们的挪动 */ transform: translateY(17.5px) rotateX(-90deg); } </style></head><body><ul> <li> <div class="box"> <div class="front">黑马程序员</div> <div class="bottom">pink老师等你</div> </div> </li> <li> <div class="box"> <div class="front">黑马程序员</div> <div class="bottom">pink老师等你</div> </div> </li> <li> <div class="box"> <div class="front">黑马程序员</div> <div class="bottom">pink老师等你</div> </div> </li> <li> <div class="box"> <div class="front">黑马程序员</div> <div class="bottom">pink老师等你</div> </div> </li> <li> <div class="box"> <div class="front">黑马程序员</div> <div class="bottom">pink老师等你</div> </div> </li> <li> <div class="box"> <div class="front">黑马程序员</div> <div class="bottom">pink老师等你</div> </div> </li></ul></body></html>案例：旋转木马
- 给 body 增加 透视成果 perspective: 1000px;
给 section 增加大小，肯定不要遗记增加 3d 出现成果管制外面的 6 个 div
- 别忘记子绝父相，section 要加绝对定位
外面 6 个 div 全副相对定位叠到一起，而后挪动不同角度旋转和间隔
- 留神：旋转角度用 rotateY 间隔必定用 translateZ 来管制
- 给 section 增加动画 animation，让它能够主动旋转即可
<!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>综合案例：旋转木马</title> <style> body { perspective: 1000px; } section { position: relative; width: 300px; height: 200px; margin: 150px auto; transform-style: preserve-3d; /* 增加动画成果 */ animation: rotate 10s linear infinite; background: url(media/pig.jpg) no-repeat; } section:hover { /* 鼠标放入 section 进行动画 */ animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } 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); } </style></head><body><section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></section></body></html>浏览器公有前缀
浏览器公有前缀是为了兼容老版本的写法，比拟新版本的浏览器毋庸增加。
公有前缀
- -moz-：代表 firefox 浏览器公有属性
- -ms-：代表 ie 浏览器公有属性
- -webkit-：代表 safari、chrome 公有属性
- -o-：代表 Opera 公有属性
提倡的写法
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;参考
参考
黑马程序员pink老师前端入门教程
HTML CSS