新增属性

兼容性 IE9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

圆角边框（重点）

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。

语法： border-radius:length;
参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

盒子阴影

我们可以使用 box-shadow 属性为盒子添加阴影。

语法： box-shadow: h-shadow v-shadow blur spread color inset; | 值 | 描述 | | :—- | :—- | | h-shadow | 必需。水平阴影的位置。允许负值。 | | v-shadow | 必需。垂直阴影的位置。允许负值。 | | blur | 可选。模糊距离。 | | spread | 可选。阴影的尺寸。 | | color | 可选。阴影的颜色。 | | inset | 可选。将外部阴影 (outset) 改为内部(inset)阴影。 |

实例： div{ box-shadow: 10px 10px 5px rgba(0, 0, 0, .3); }
outset： 默认不写的，写了会不起效果。
盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

语法： text-shadow: h-shadow v-shadow blur color; | 值 | 描述 | | :—- | :—- | | h-shadow | 必需。水平阴影的位置。允许负值。 | | v-shadow | 必需。垂直阴影的位置。允许负值。 | | blur | 可选。模糊距离。 | | color | 可选。阴影的颜色。 |

CSS3新增选择器

E：元素
att：属性
类选择器、属性选择器、伪类选择器，权重为 10。

属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att = “val”]	选择具有att属性且属性等于 val 的E元素
E[att ^= “val”]	匹配具有att属性且值是以 val开头的 E元素
E[att $= “val”]	匹配具有att属性且值是以 val结尾的 E元素
E[att *= “val”]	匹配具有att属性且值中含有val 的 E元素

代码解析

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3属性选择器</title>
    <style>
        input{
            display: block;
            margin-bottom: 20px;
        }
        /*E[att] 选择具有att属性的E元素 
        **input[value] 选择具有value属性的input元素 
        */
        input[value]{
            background-color: pink;
        }
         /*E[att = 'val'] 选择具有att属性且属性等于val的E元素 
        **input[type = 'password'] 选择具有type属性且值等于val的input元素 
        */
        input[type = 'password']{
            background-color: skyblue;
        }
        /*E[att ^= "val"    选择具有att属性且
        **E[att $= "val"]   选择具有att属性且是以val结尾的E元素
        **E[att *= "val"    选择具有att属性且包含val的E元素
        ** div[class ^= 'con']  选择具有 class属性且是以 con开头 的div元素
        ** div[class $= 'con']  选择具有 class属性且是以 con结尾 的div元素
        ** div[class *= 'con']  选择具有 class属性且 包含con 的div元素
        */
        div[class ^= 'con']{
            background-color: pink;
        }
        div[class $= 'con']{
            background-color: skyblue;
        }
        div[class *= 'con']{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text" value="具有value属性">
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <div class="con_1">具有con的开头</div>
    <div class="con_2">具有con的开头</div>
    <div class="con_3">具有con的开头</div>
    <div class="in_con">具有con的结尾</div>
    <div class="in_con">具有con的结尾</div>
    <div class="in_con_5">具有con</div>
    <div class="in_com_4">具有con</div>
</body>
</html>

结构伪类选择器

选择符	简介
E：first-child	匹配父元素的第一个子元素 E
E：last-child	匹配父元素最后一个子元素 E
E：nth-child(n)]	匹配父元素的第 n 个子元素 E （ n 可以是数字、关键字和公式）
E：first-of-type	指定类型的 E 的第一个
E：last-of-type	指定类型的 E 的最后一个
E：nth-of-type(n)	指定类型的 E 的第 n 个

nth-child(n)

数字的话从1开始
一般用的关键字：even偶数 odd奇数
公式：
2n： 偶数 2n + 1： 奇数。
5n： 5 10 15 …
n + 5： 从第5个开始到最后一个
-n + 5： 前5个，包含第5个
······

代码解析

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        /* child */
        /* 第一个 */
        div:first-child{
            background-color: pink;
        }
        /* 最后一个
        因为child方法是先 排序（last-child）,再寻找前面的 元素（div）这里最后一个是元素是span。
        所以匹配不到 */
        div:last-child{
            background-color: pink;
        }
        /* 指定哪一个 nth-child(n) 选择这里 n = 3 所以配到了第三个 */
        div:nth-child(3){
            background-color: skyblue;
        }
        /* type */
        /* 第一个 */
        p:first-of-type{
            background-color: slategray;
        }
        /* 最后一个 */
        p:last-of-type{
            background-color: tomato;
        }
        /* 指定哪一个 nth-child(n) 选择这里 n = 2 所以配到了第2个 */
        p:nth-of-type(2){
            background-color: tomato;
        }
        span{display: block;}
        /* 公式的用法 */
        /* 选择偶数行: even 或者 2n */
        /* span:nth-of-type(even){
            background-color: turquoise;
        } */
        span:nth-of-type(2n){
            background-color: turquoise;
        }
        /* 选择奇数行: odd 或者 2n */
        span:nth-of-type(odd){
            background-color: skyblue;
        }
        /* span:nth-of-type(2n+1){
            background-color: skyblue;
        } */
        /* 包含第六个的后面所有个数 */
        ul li:nth-child(n + 6){
            background-color: skyblue;
        }
        /* 包含第四个的前面四个 */
        ul li:nth-child(-n + 4){
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <!-- <input type="password" name="" id=""> --> <!-- child方法 -->
    <div>div的第1个</div>
    <div>div的第2个</div>
    <div>div的第3个</div>
    <div>div的第4个</div>
    <div>div的第5个</div>
    <div>div的最后一个</div>
    <p>p的第1个</p>
    <p>p的第2个</p>
    <p>p的第3个</p>
    <p>p的第4个</p>
    <p>p的第5个</p>
    <p>p的最后一个</p>
    <span>span的第1个</span>
    <span>span的第2个</span>
    <span>span的第3个</span>
    <span>span的第4个</span>
    <span>span的第5个</span>
    <span>span的最后一个</span>
    <ul>
        <li>li的第1个</li>
        <li>li的第2个</li>
        <li>li的第3个</li>
        <li>li的第4个</li>
        <li>li的第5个</li>
        <li>li的第6个</li>
        <li>li的第7个</li>
        <li>li的最后一个</li>
    </ul>
</body>
</html>

nth-chil与nth-of-type的区别

E:nth-chil
把所有的盒子排序
执行时先看 nth-chil(n) 再判断 E,先选择第几个，再判断元素E
E:nth-of-type
把指定元素的盒子排序
执行先判断 E（指定的元素） 再看 nth-of-type(n)，先判断元素E，再选择第几个

伪元素选择器

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

行内元素
必须有 content 属性
伪元素选择器 和 标签选择器 一样，权重为 1 | 选择符 | 简介 | | :—- | :—- | | ::before | 在元素内部的前面插入内容 | | ::after | 在元素内部的后面插入内容 |

通常用于配合字体图标使用，和鼠标经过样式使用，还有清除浮动时使用。

代码解析

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        div:hover::before{
            content: '';/* 必须要有的属性 */
            display: inline-block; /* 因为是行内元素没有宽高，改成行内块 */
            width: 100%;
            height: 100%;
            background: url(images/bg.jpg);
            filter: blur(8px); /* 模糊属性，值越大越模糊 */
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型。有 content-box 值和 border-box 值 这是个非常方便的属性，可以解决使用内外边距时会撑大容器（盒子）的问题

关于盒子组成分成两种情况：

box-sizing: content-box （以前默认的）盒子大小为: width + padding + border
box-sizing: border-box 盒子大小为: width (前提padding和border不会超过width宽度)

CSS3新增特效

滤镜filter

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

语法：filter: 函数();
例(模糊处理)： filter: blur(3px); blur 数值越大越模糊。通常用于模糊背景图片等。

calc 函数

用来计算子元素的大小，实现子元素的大小会随着父元素的改变而改变。

**面可以使用 + - / 来进行计算。
写法：width: calc(100% - 80px);
这是一个进度条

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        .bar {
            /* box-sizing: border-box; */
            position: relative;
            margin-top: 50px;
            width: 250px;
            height: 25px;
            border: 2px solid rgb(90, 88, 88);
            border-radius: 10px;
            padding: 1px;
        }
        .bar_in {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            height: calc(100%);
            width: calc(100% / 2);
            background-color: skyblue;
            transition: all .6s;
        }
        .bar:hover .bar_in {
            width: calc(100%);
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>

过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。经常和 :hover 一起搭配使用。

语法：transition: 要过渡的属性花费时间运动曲线何时开始;
过度的属性：必填。例如，宽、高、背景颜色等都可以，也可以写 all(代表所有属性都变化过渡)
花费时间：必填。单位是秒（必须写单位）比如 0.5s，用来确定动画过渡需要花费的时间。
运动曲线： 默认是 ease （可以省略）
何时开始 单位是秒（必须写单位）可以设置延迟触发时间默认是 0s（可以省略）

过渡案例的使用可参考上面的代码。

2D

转换(transform) 是SS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。更详细使用可查看转载文章 2D 转换包括移动(translate) 旋转 (rotate) 缩放 (scale)

2D转化是在改变二维平面坐标位置形状。
- 二维坐标 x 轴：越往右越大（与数学相同）
- 二维坐标 y 轴：越往下越大（与数学相反）
2D 搭配 过渡(transition) 使用效果更佳，可以做简单的动画效果了。
2D 里面还有一个属性可以设置元素转换的中心点 （默认是盒子的中心点）。
- 语法：transform-origin:(x,y) x y 是在二维平面坐标位置。（可以跟方位名词）

移动 (translate)

2D 里面的移动 (translate) 类似于定位（position）一样。最大优势：也就是不影响其它元素的位置，缺点：对行内元素没有效果。 移动 (translate) 可以用于盒子的垂直居中对齐。不用写具体值，搭配(calc) 效果更好。 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

语法：

transform: translate(x, y); 移动x轴与y轴,不能省略（两个值都要填）。
transform: translateX(n); x轴
transform: translateY(n); y轴

旋转 (rotate)

2D 里面的旋转是指在二维平面内 顺时针 / 逆时针 的旋转。可以用来做三角形。哈哈哈哈配合，中心点 transform-origin:(x,y) 使用效果更佳。（默认中心旋转）

语法：

transform: rotate(度数); 度数为正顺时针。 （单位是：deg）

缩放 (scale)

2D 里面的缩放就是放大缩小的作业啦。优势：不影响其它盒子 配合，中心点 transform-origin:(x,y) 使用效果更佳。（默认中心放大）

语法：

transform: scale(x,y); （输入值 不需要单位，不能是负数 ，0.x/0.y可以省略不写0）
transform: scale(n); x轴与y轴相同倍数
transform: scaleX(n); x轴
transform: scaleY(n); y轴

总结

2D 更多 过渡(transition) 使用效果更佳，可以做简单的动画效果了。比如鼠标经过，移动一下，旋转一下，放大/缩小一下这样。（也可以同时两三个效果）同时使用多个转换，其格式为: transform: tanslate() rotate() scale(),顺序会影响转换效果。

代码练习（几个简单的小盒子）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换</title>
    <style>
        body{
            margin: 100px  700px;
        }
        p{
            font-size: 30px;
            line-height: 400px;
            text-align: center;
        }
        div {
            position: relative;
            margin-bottom: 100px;
            width: 400px;
            height: 400px;
            background-color: skyblue;
            transition: all 1s;
        }
        .con div{
            /* 通过 absolute绝对布局 和 transform: translate()移动 实现盒子的居中 */
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(50%);
            height: calc(50%);
            transform: translate(-50%,-50%);
            background-color: pink;
        }
        .con div p{
            margin: 0;
            font-size: 15px;
            line-height: 200px;
        }
        .con:hover {
            /* transform: translate(x, y); 移动x轴与y轴,不能省略。
            ** 优点：不用影响到其它元素的位置
            ** 单独写法：
            ** transform: translateX(n);    x轴
            ** transform: translateY(n);    y轴
            */
            transform: translate(20px, 10%);
        }
        .con1{
            /* transform-origin : left 0px;      */
        }
        .con1:hover{
             /* transform: scale(x,y); 中心放大，x,y 放大倍数,可以省略（即是两个值一样） 
             ** 优势：不用影响其它盒子的位置，也可以设置缩放中心点
             ** 单独写法：
             ** transform: scaleX(n);    x轴
             ** transform: scaleY(n);    y轴
             */
            transform: scale(1.2);
        }
        .con2{
            /* transform: rotate(n); 中心旋转，正数正旋转，负数负旋转（单位是 deg）
            ** 默认是中心点 (50%，50%)/(center，center) 
            ** 转换中心点 transform-origin : x y;    参数可以百分比、像素或者是方位名词，空格隔开 */
            transform-origin : left 0px;     
        }
        .con2:hover{
            transform: rotate(-360deg);
        }
        /* 通过 rotate 制作三角形箭头 */
        .con2::after{
            content: '';
            position: absolute;
            top: 47%;
            right: 23%;
            width: 15px;
            height: 15px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
        }
        .con2:hover::after{
            transform: rotate(-135deg);
        }
        .con2-1{
            overflow: hidden;
        }
        .con2-1::after{
            content: "rotate旋转案例";
            display: block;
            width: calc(100%);
            height: calc(100%);
            font-size: 25px;
            text-align: center;
            line-height: 400px;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 1s;
        }
        .con2-1:hover::after{
            transform: rotate(0deg);
        }
        .con-1{
            transition: all 1s;
        }
        .con-1:hover{
            /* 注意书写顺序，应该吧 translate 放在最前面，不然会出现混乱 */
            transform: translate(200px,50px) scale(1.2) rotate(360deg) ;
        }
    </style>
</head>
<body>
    <div class="con">
        <div>
            <p>translate移动和实现居中</p>
        </div>
    </div>
    <div class="con1">
        <p>scale放大</p>
    </div>
    <div class="con2">
        <p>rotate旋转</p>
    </div>
    <div class="con2-1">
        <!-- <p>rotate旋转</p> -->
    </div>
    <div class="con-1">
        <p>综合案例</p>
    </div>
</body>
</html>

动画

动画(animation) 是CS3中具有颠覆性的特征之一，能通过设置多个节点来精确控制一个或一组动画。可以理解为过渡的加强版，比过渡多了更多的变化、更详细的控制，连续播放暂停等功能。动画可以分为两步：定义动画 和 调用(使用)动画

定义动画

定义动画通过 keyframes 动画开始状态 0% (from) 和动画结束状态 100% (to) % 可以写1-100，通过时间划分

/* 定义动画 */
@keyframes 动画名称 {
   /* from 和 to 等价于 0% 100% */
   /* 动画开始状态 */
   0% {
       transform: translateX(0px);
   }
   /* 动画结束状态 */
   100% {
       transform: translateX(1500px);
   }
}

调用(使用)动画

通过animation开头的各种属性设置动画的属性。必须要有的属性：调用动画：animation-name: 动画名称;持续时间: animation-duration: 时间;

常用属性 | 属性 | 描述 | | —- | —- | | @keyframes | 定义动画。 | | animation | 所有动画属性的简写属性，除了animation-play- state属性 （暂停） | | animation-name | 必需！ 调用 @keyframes 动画的名称。 | | animation-duration | 必需！ 动画完成个周期所花费的s秒或ms毫秒，默认是0。 | | animation-timing-function | 动画的速度曲线，默认是 ease。linear 匀速 | | animation- delay | 动画暂停多久开始，默认是0。单位是s秒 | | animation-iteration-count | 动画被播放的次数，默认是1（次）,还有infinite（重复） | | animation-direction | 动画是否在结束后逆向播放，默认是normal , alternate 逆播放 | | animation-play-state | 定义动画是否正在运行或暂停。默认是running(运行),还有paused(暂停)。 | | animation-fill-mode | 动画结束后保持的状态，默认是回到起始backwards，保持forwards |

速度曲线 | 属性值 | 描述 | | —- | —- | | linear | 开头到结尾。匀速 | | ease | 默认低速开始，然后加快，在结束前变慢。 | | ease-in | 低速开始 | | ease-out | 低速结束 | | ease-in-out | 低速开始和结束 | | steps() | 指定了时间函数中的间隔数量(步长) |

步长挺重要的。

开发中最常用的是复合的写法（animation：(前两个不能省略)
- animation: name duration timing-function delay iteration-count direction fill-mode;
- animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画结束状态

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画练习</title>
    <style>
        /* 定义动画 */
        @keyframes move {
            /* from 和 to 等价于 0% 100% */
            /* 动画开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 动画结束状态 */
            100% {
                transform: translateX(1500px);
            }
        }
        @keyframes move1 {
            0% {
                transform: translate(0, 0);
            }
            35% {
                transform: translate(1500px, 0);
            }
            50% {
                transform: translate(1500px, 500px);
            }
            85% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .wjz-dh01 {
            /* 调用动画 */
            animation-name: move1;
            /* 持续时间 单位是秒(s) 毫秒(ms) */
            animation-duration: 6s;
            /* 运动曲线 默认值: ease */
            animation-timing-function: ease;
            /* 延时开始 默认值: 0s */
            animation-delay: 0s;
            /* 重复次数 默认值: 1  iteration 重复的 count 次数 infinite 无限*/
            animation-iteration-count: infinite;
            /* 是否反方向播放 默认是: normal 反方向 alternate*/
            animation-direction: normal;
            /* 动画结束后的状态 默认是：backwards 停留在结束的状态 forwards */
            /* animation-fill-mode: backwards; */
            /* 简写(前两个不能省略) animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态*/
            animation: move1 6s linear 0s infinite alternate backwards;
            /* linear匀速状态 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }
        .wjz-dh01:hover {
            /* 动画时候暂停 默认是：running(运行) 停止 paused*/
            animation-play-state: paused;
        }
        .wjz-dh02 {
            position: relative;
            margin: 100px auto;
        }
        .wjz-dh02 .city {
            position: absolute;
            right: 40px;
            top: 30px;
            width: 50px;
            height: 50px;
            /* background-color: slategrey; */
        }
        .wjz-dh02 .one{
            right: 80px;
            top: 100px;
        }
        .wjz-dh02 .dotted{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            z-index: 1;
            background-color: hotpink;
        }
        .wjz-dh02 div[class ^='pulse'] {
            /* 保证波纹垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
             /* 保证波纹垂直居中 */
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 12px red;
            /* 简写(前两个不能省略) animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态*/
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: pules 1.2s linear infinite backwards;
        }
        .pulse2{
            animation-delay: 0.4s!important;
        }
        .pulse3{
            animation-delay: 0.8s!important;
        }
        @keyframes pules{
            0%{
            }
            50%{
                /* transform: scale(2); 不能用 scale 不仅阴影变大，还会偏移了 */
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            100%{
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
        .p {
            position: absolute;
            top: 230px;
            left: 40%;
            width: 0;
            height: 40px;
            font-size: 30px;
            background-color: #fff;
            white-space: nowrap;    /* 一行显示 */
            overflow: hidden;       /* 超出隐藏 */
            /* 简写(前两个不能省略) animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态*/
            /* steps() 步长，分成多少步来走 linear 匀速 ease默认 */
            animation: wz 5s steps(16) infinite;
        }
        @keyframes wz{
            0% {}
            100% {width: 480px;}
        }
    </style>
</head>
<body>
    <div class="wjz-dh01"></div>
    <div class="wjz-dh02">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city one">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
    <div class="p">这是一个用了步长来显示的一句话</div>
</body>
</html>

3D

通过近大远小的的原理实现3D效果。在网页中通过三维坐标系实现，就是在二维的基础上加上Z轴，往外面是正值。 3D也就是在2D的基础上多多加一个Z轴。 3D是建立在2D的基础上的，2D基础一定要牢靠

3D位移 translate3d(x,y,z)(复合写法)
- 在二D的基础上多加一个Z轴的移动方向：translateZ(n) 单位也是 px
3D旋转 rotate3d(x,y,z) 左手定则，拇指对着正方向，四手指弯曲方向为正。
- 沿着X轴的旋转方向：transform:rotateX(n) 单位也是 deg
- 沿着Y轴的旋转方向：transform:rotateY(n) 单位也是 deg
- 沿着Z轴的旋转方向：transform:rotateZ(n) 单位也是 deg
透视 perspective：距离 在2D平面产生近大远小视觉立体，但是只是效果二维的单位是 px
- 数值越小，代表离我们人体越近，显示得也越大。
3D呈现 transfrom-style 控制子元素是否开启三维立体环境
- transform-tyle: flat; 子元素不开启3D立体效果，默认值
- transform-style: preserve-3d; 子元素开启3D立体效果。
3D木马效果案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转木马</title>
    <style>
        body{
            /* 实现3D效果，近大远小的效果 */
            perspective: 800px;
        }
        section{
            position: relative;
            margin: 200px auto;
            width: 250px;
            height: 300px;
            /* transition: all 5s; */
            /* 让儿子保持3D效果 */
            transform-style: preserve-3d;
            animation: move 10s linear infinite;
        }
        section img{
            width: 100%;
            height: 100%;
        }
        section:hover{
            animation-play-state: paused;
        }
        section div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        section div img{
            width: 100%;
            height: 100%;
        }
        section div:nth-child(1){
            transform: 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 move{
            0%{transform: rotateY(0deg)}
            100%{transform: rotateY(360deg);}
        }
    </style>
</head>
<body>
    <section>
        <div><img src="images/0.jfif" alt="123"></div>
        <div><img src="images/01.jpg" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
    </section>
</body>
</html>

代码学习笔记

CSS3属性、选择器，2/3D（动画）

新增属性

圆角边框（重点）

盒子阴影

文字阴影

CSS3新增选择器

属性选择器

结构伪类选择器

nth-chil与nth-of-type的区别

伪元素选择器

CSS3 盒子模型

CSS3新增特效

滤镜filter

calc 函数

过渡（重点）

2D

移动 (translate)

旋转 (rotate)

缩放 (scale)

总结

动画

定义动画

调用(使用)动画

3D