乐趣区

关于html5:HTML5CSS3特性总结

jiezi

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>

多媒体标签

新增的多媒体标签次要蕴含两个：

  1. 音频：<audio>
  2. 视频：<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 个）

区别：

  1. nth-child 对父元素外面所有孩子排序抉择（序号是固定的）先找到第 n 个孩子，而后看看是否和 E 匹配
  2. 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：伪元素革除浮动

  1. 额定标签法也称为隔墙法，是 W3C 举荐的做法
  2. 父级增加 overflow 属性
  3. 父级增加 after 伪元素
  4. 父级增加双伪元素

额定标签法也称为隔墙法，是 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，这样咱们计算盒子大小的形式就产生了扭转。

能够分成两种状况：

  1. box-sizing: content-box 盒子大小为 width + padding + border（以前默认的）
  2. 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: 要过渡的属性 破费工夫 静止曲线 何时开始;
  1. 属性：想要变动的 css 属性，宽度高度、背景色彩、内外边距都能够。如果想要所有的属性都变动过渡，写一个 all 就能够
  2. 破费工夫：单位是秒（必须写单位）比方 0.5s
  3. 静止曲线：默认是 ease（能够省略）
  4. 何时开始：单位是秒（必须写单位）能够设置提早触发工夫默认是 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>

综合写法

留神：

  1. 同时应用多个转换，其格局为：transform: translate() rotate() scale() … 等
  2. 其程序会影转换的成果。（先旋转会扭转坐标轴方向）
  3. 当咱们同时有位移和其余属性的时候，记得要将 位移放到最前
<!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 中具备颠覆性的特色之一，可通过 设置多个节点来准确管制一个或一组动画，罕用来实现简单的动画成果。

相比拟过渡，动画能够实现更多变动，更多管制，间断自动播放等成果。

根本应用

制作动画分为两步：

  1. 先定义动画
  2. 再应用（调用）动画
用 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

退出移动版