目录

一.HTML5（取代 HTML4 + XHTML）

二.CSS3 选择器

三.2D 转换

四.动画（animation）

五.3D 转换

一.HTML5（取代 HTML4 + XHTML）

1.广义上的 HTML5

拥有强大的技术集，这些技术集是指： HTML5、CSS3 、javascript 。

2.新增语义化标签

注意：① 语义化标签：针对搜索引擎，可多次使用，移动端支持比较友好。

②在“IE9”浏览器中，需要把语义化标签转换成块级元素
<head>
    ...
    <style>
        header,
        nav,
        section {
            
            display: block;
            height: 120px;
            background-color: pink;
            ...
        }
    </style>
</head>
<body>
    
    <header> header </header>
    <header> header </header>
    <nav> nav </nav>
    <section> section </section>
    ...
</body>
3.多媒体音频标签

3.1 audio 音频标签
<body>
  
  
  
  

  
  

  <audio controls>
    <source src="media/snow.mp3" type="audio/mpeg" />
    <source src="media/snow.ogg" type="audio/ogg" />
            您的浏览器不支持播放声音（ 此文字在上述两种音频均不可用时出现 ）
  </audio>
</body>
3.2 video 视频标签
<body>
  

  
  
  <video controls="controls" autoplay muted loop poster="media/pig.jpg">
    <source src="media/video.mp4" type="video/mp4">
    <source src="media/video.ogg" type="video/ogg">
  </video>
</body>
4.新增 input 标签

type="email" ：限制用户输入必须为Email类型

type="url" ：限制用户输入必须为URL类型

type="date / time" ：限制用户输入必须为日期 / 时间类型

type="number" ：限制用户输入必须为数字类型

type="tel" ：限制用户输入必须为手机号码

type="search" ：搜索框会出现 x 方便一次删除输入内容

type="color" ：生成一个颜色选择表单

5.新增表单属性

required ：内容不能为空

placeholder ：提示文本，存在默认值将不显示

autofocus ：自动聚焦

autocomplete ："off / on" 浏览器会提示历史输入，为了隐私一般设置为off

multiple ：多选文件提交 file默认为单选一个文件
用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> 
<input type="submit" value="提交"> 上传头像: 
<input type="file" name="" id="" multiple="multiple">
6.HTML5 思维导图总结

二.CSS3 选择器

0.CSS3现状

浏览器支持度差，需要添加私有前缀，移动端优于PC端。

1.属性选择器 [ ]

类选择器、属性选择器、伪类选择器，权重为 10

        /* 属性选择器使用方法 */
        /* 选择的是：  既是button 又有 disabled 这个属性的元素 */
        /* 1.直接写属性 */ 
        button[disabled] {}

        /* 2. 属性等于值 */
        input[type="search"] {}

        /* 3. 以某个值开头的 属性值 */ 
        div[class^="icon"] {}

        /* 4. 以某个值结尾的 */
        div[class$="icon"] {}

        /* 5. 可以在任意位置的 */   
        div[class*="icon"] {}
        
        ...

<body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button disabled="disabled">按钮</button>

    <input type="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框">

    <div class="icon1">图标1</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>
</body>

2.结构伪类选择器：

类选择器、属性选择器、伪类选择器，权重为 10

    <style>
        ul li:first-child {}    /* 父元素中第一个子元素 */
        ul li:last-child {}    /* 父元素中最后一个子元素 */
        ul li:nth-child(8) {}     /* 父元素中第n个子元素 */

        /* n 可是关键词  even 是偶数 odd 是奇数 */
        /* n 可是公式  2n 是偶数 2n+1 是奇数 5n 是5的倍数 */
        ul li:nth-child(even/2n) {}

        /* -n + 5 就是选择前面5个  */
        ul li:nth-child(-n+5) {}

        /* div span:nth-child(1) {选不到span 会选择出p 因为p是div的第一个子元素} */
/* 总结： :nth-child(n)  选择父元素里面的第 n 个孩子， 它不管里面的孩子是 span 还是 p */

        /*选择 span 的方法 */
        div span:first-of-type {}
        div span:last-of-type {}   
        div span:nth-of-type(2) {}
    </style>

<body>
    <div>
        <p>我是一个p标签</p>
        <span>我是span标签</span>
        <span>我是span标签</span>
    </div>

    <!-- ul 里面我们只允许放li  所以 nth-child = nth-of-type -->
    <ul>
        <li>1</li>
        ...
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

区分 nth-child 和 nth-of-type：

nth-child 选择父元素里面的第几个子元素，子元素可能不是同种类型，如span p同等看待
nth-of-type 选择指定类型的元素

3.伪元素选择器 ::

        /* 伪元素选择器权重为1 */
        div::before {  
            /* before 和 after 必须有 content 属性，可以为空 */
            content: "我";
            /* before 和 after 创建的是一个行内元素，要转换类型设置宽高 */
            display: inline-block;
            width: 100px;
            height: 100px;
            ...}
        
        div::after {
            content: "小猪佩奇";
            ...}

<body>
    <div>是</div>
</body>

伪类选择器注意事项：

before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1

应用：伪元素字体图标：

        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            ...}       
         p::after {
            /* 字体图标代码，可自行查看 */
            content: '\ea50';
            position: absolute;
            top: 10px;
            right: 10px;
            /* 务必务必务必不要忘记字体图标需要引用自定义字体！ */
            font-family: 'icomoon';
        }
...
<body>
    <!-- 以前的办大事 div 中嵌套一个 span 现在只需要一个p -->
    <p></p>
</body>

三.2D 转换

1.定义及元素

定义：2D 转换：改变标签在二维平面上的位置和形状，元素如下：

移动： translate

旋转： rotate

缩放： scale

2.translate 语法（移动）
            /* 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); */

            span {
            /* translate 对于行内元素是无效的 此处不会移动 */
            transform: translate(300px, 300px);
            }
2D 的移动主要是指水平X、垂直Y方向上的移动，类似定位

translate 最大的优点：不影响其他元素的位置

translate 中的%单位，是相对于本身的宽度和高度来进行计算的 transform:translate:(50%,50%);

行内标签没有效果（如<span>）

拓展：让盒子实现水平垂直居中，使用 translate 就不需要计算了
            /* translate(-50%, -50%)  盒子往上往左走自己高度的一半 */
            transform: translate(-50%, -50%);
3.rotate 语法（旋转）
        img {
            width: 150px;
            /* 顺时针（正数）旋转45度 单位deg */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        img:hover {
            transform: rotate(360deg);
        }
rotate 里面跟度数，单位是 deg

角度为正时，顺时针，角度为负时，逆时针

默认旋转的中心点是元素的中心点

拓展：CSS书写三角形并旋转
        div {
            position: relative;
            ...}    
        div::after {/* 伪类选择器相当于添加了一个行内元素 absolute自动使之变成块元素 */
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            /* 只让右边和底边显示 构造一个直角 */
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            /* 旋转直角45° 使之看起来向下 */
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /* 鼠标经过div  里面的三角旋转 */
        div:hover::after {
            /* 使直角向上旋转 注意旋转角度225 = 45 + 180 */
            transform: rotate(225deg);
        }
<body>
    <div></div>
</body>
设置旋转中心点( transform-origin )

注意：后面的参数 x 和 y 用空格隔开

x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center

可以给 x y 设置像素：transform-origin: 50px 50px;

可以给 x y 设置方位名词：transform-origin: left bottom;

设置旋转中心点实际应用
        div::before {
            content: "设置中心旋转点实例";
            /* 转180° 意味着这个元素翻转下去了 配合父元素 overflow 使之看不到 */
            transform: rotate(180deg);
            /* 将旋转中心设置为 左下角 */
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 即 旋转了0° */
        div:hover::before {
            transform: rotate(0deg);
        }
4.scale 语法（缩放）

注意：x 与 y 之间使用逗号进行分隔

transform: scale(2, 2): 宽和高都放大了二倍

transform: scale(2): 只写一个参数，第二个参数就和第一个参数一致

transform:scale(0.5, 1): 宽缩小一倍，高保持不变

scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

分页按钮实例：
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s; }
        li:hover {
            transform: scale(1.2);}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        ...
        <li>7</li>
    </ul>
</body>
5.2D 转换综合写法以及顺序问题

同时使用多个转换，其格式为 transform: translate() rotate() scale()

顺序会影响到转换的效果(先旋转会改变坐标轴方向)

但我们同时有位置或者其他属性的时候，要将位移放到最前面
       transform: translate(150px, 50px) rotate(180deg) scale(1.2);

四.动画（animation）

1.动画使用步骤

定义动画
调用定义好的动画

        /* 页面一打开，一个盒子就从左边走到右边 */
        /* 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;          /* 持续时间 */  
        }

2.动画序列

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

<style>
 /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);}
            to {
                transform: translate(1000px, 0);} } */

        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 百分比要是整数*/
        /* 2. 百分比就是 总的时间（这个案例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>

3.动画常见属性

@keyframes ：规定动画。
animation ：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name（必写）：规定 @keyframes 动画的名称。
animation-duration（必写）：规定动画完成一个周期所花费的秒或毫秒，默认是0。
animation-timing-function ：规定动画的速度曲线，默认是“ease”先快后慢再快 “linear”匀速。
animation-delay：规定动画何时开始，默认是0。
animation-iteration-count ：规定动画重复播放的次数，默认是1，还有 infinite"无限循环"
animation-direction ：规定动画是否在下一周期逆向播放，默认是 “normal“, alternate"逆播放”
animation-play-state ：规定动画是否播放或暂停。默认是 "running", 还有 "pause"，鼠标经过暂停。
animation-fill-mode ：规定动画结束后状态，保持现状 forwards 回到起始 backwards

4.动画简写

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

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

动画实例之大数据热点图：

   <style>
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;  /* 居中的中国地图 */
            margin: 0 auto;
        }    
        .beijing {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }        
        .taibei {
            top: 500px;
            right: 80px;
        }  
        .dotted {  /* 城市中心圆点 */
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .beijing div[class^="pulse"] {/* beijing div中以 pluse 命名开头的 div */
            /* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            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无限循环;
        }
        
        .beijing div.pulse2 {
            /* 波纹2 延缓 0.4s执行动画 动画和 波纹1 一样 */
            animation-delay: 0.4s;
        } 
        .beijing 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="beijing">
            <!-- 中心点 波纹1 波纹2 波纹3 -->
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="beijing taibei">
        ...
        </div>
    </div>
</body>

5.速度曲线 steps() 模仿打印机打字效果

        div {
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让文字强制一行内显示 多余部分  overflow: hidden;*/
            white-space: nowrap;
            overflow: hidden;
            /* steps 就是分几步来完成动画 有了steps 就不写 ease / linear */
            animation: w 4s steps(10) forwards停留在打印完的样子;
        }
        
        @keyframes w {
            0% {
                width: 0;}
            100% {    /* 总共 10 个字，每个字像素 20px，10*20=200 模仿打印 */
                width: 200px;}
        }
    </style>
</head>
<body>
    <div>世纪佳缘我在这里等你</div>
</body>

6.奔跑的熊

结论：元素可以添加多个动画，用逗号分隔。

<style> 
        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%;
                /* 左移自身的 50% 实现居中效果 */
                transform: translateX(-50%);}}
</style>
<body>
    <div></div>
</body>

五.3D 转换

1.三维坐标系

x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值

2.3D 转换知识要点

3D 位移：translate3d(x, y, z)

3D 旋转：rotate3d(x, y, z)

透视：perspctive

3D呈现 transfrom-style

3.3D 位移 translate3d()

3D 位移：在 2D 移动的基础上多加了 z 轴移动方向。

transform: translateX(100px)：仅仅是在 x 轴上移动。

transform: translateY(100px)：仅仅是在 y 轴上移动。

transform: translateZ(100px)：仅仅是在 z 轴上移动，此处只能跟 px 单位。

transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离。

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，除非设置透视。

注意：x, y, z 对应的值不能省略，可用 0 进行填充。

4.透视 perspective

想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)。

透视也称视距，视距是人的眼睛到屏幕的距离。

视距越小在电脑成像越大，越大成像越小。

透视的单位是像素。
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 1. translateZ(100px) 向外移动100px （向眼睛来移动的）后面的单位一般跟px */
            /* 2. 3D移动有简写的方法 xyz是不能省略的，如果没有就写0 */
            /* transform: translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 0); */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
注意：透视需要写在 被视察元素 的 父盒子 上面。

5. translateZ 与 perspecitve 的区别

perspecitve 给父级进行设置，translateZ 给子元素进行设置。

translateZ(100px)：仅仅是在Z轴上移动，看不到变化；有了透视，就能看到translateZ 引起的变化。

6.3D 旋转 rotate3d

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度。

transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转（了解即可）。

左手准则：

左手的手拇指指向 x 轴的正方向。

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

7.3D 旋转 rotateY（同理于rotateX）

两面翻转盒子实例：

用大盒子 box 包裹住子盒子 front + back，给 body 设置透视

大盒子 box 在鼠标经过时会绕着 y轴旋转180°

子盒子 back 本身需要旋转180° 和 front 实现背靠背的效果

为保证子盒子本身旋转实现，要给父盒子添加 transform-style 属性来保留子盒子立体空间
    <style>
        body {
            perspective: 400px;
        }     
        .box {
            position: relative;
            ...
            transition: all .4s;
            transform-style: preserve-3d;/* 让背面的紫色盒子保留立体空间 给父级添加的 */
        }        
        .box:hover {
            transform: rotateY(180deg);/* 鼠标经过 盒子翻转 */
        }        
        .front,
        .back {
            position: absolute;
            ...
            border-radius: 50%;
            ...
        }       
        .front {
            background-color: pink;
            z-index: 1;/* 保证加载好后 front在前面 */
        }      
        .back {
            background-color: purple;
            transform: rotateY(180deg); /* 像手机一样 背靠背 旋转 */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">第五人格</div>
        <div class="back">茶茶子这里等你</div>
    </div>
</body>
8.3D 旋转 rotateZ

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

x, y, z 表示旋转轴的矢量，表示是否沿着该轴进行旋转，最后一个标识旋转的角度

transform: rotate3d(1, 1, 0, 45deg) -- 沿着对角线旋转 45deg

transform: rotate3d(1, 0, 0, 45deg) -- 沿着 x 轴旋转 45deg

9.3D 呈现 transform-style（重要）

transform-style: preserve-3d 子元素开启立体空间，默认的值是 flat 不开启

代码写给父级，但是影响的是子盒子
    <style>
        body {
            perspective: 500px;     /* 透视效果 */  }
        .box {
            position: relative;
            ...
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;   /* 若不设置 紫色盒子就无法绕着 x轴旋转60° */
        }        
        .box:hover {
            transform: rotateY(60deg);     /* 父亲盒子绕着 y轴转60° */}        
        .box div {
            position: absolute;
            ...
            background-color: pink; }        
        .box div:last-child {  
            background-color: purple;   /* 紫色盒子绕着x轴转60° */
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
10. 3D 导航栏特效

用父盒子 ul-li 包裹住子盒子box ，box 再包住 front 和 bottom

给 li 设置透视，box 设置 transf-style 来保持 front 和 bottom 的立体空间，动画效果（鼠标经过 box 沿着x轴转9.°）

front 盒子设置 z-index: 1保持永远在上，transform: translateZ(17.5px); 保证旋转中心在屏幕里面17.5px处

bottom 盒子设置transform: translateY(17.5px) rotateX(-90deg); 保证顶部对齐front 且面朝下先移动再旋转
        ul li {
            /* 需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
            perspective: 500px;}
        .box {
            position: relative;
            transform-style: preserve-3d;
            ...
            transition: all .4s;
        }        
        .box:hover {
            transform: rotateX(90deg); }        
        .front,
        .bottom {
            position: absolute;
            ...}        
        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }        
        .bottom {
            background-color: purple;
            /* x轴一定是负值 */
            /* 如果有移动 或者其他样式，必须先写我们的移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
        <ul>
        <li>
            <div class="box">
                <div class="front">第五人格</div>
                <div class="bottom">茶茶子等你</div>
            </div>
        </li>
        ...
13.3D 转换实例之旋转木马

13.1 搭建HTML结构

<section>

<div></div>...<div></div>

</section>

里面的6个div 分别是 6个狗狗图片，注意最终旋转是 section标签旋转。

13.2 CSS样式

① 给body添加透视效果 perspective: 1000px;

② 给section 添加大小，一定不要忘记添加 3d呈现效果控制里面的6个div

注意：别忘记子绝父相，section要加相对定位

③ 里面6个div 全部绝对定位叠到一起，然后旋转不同角度和移动距离

注意：旋转角度用rotateY 距离用translateZ

④ 给section 添加动画 animation ，让它可以自动旋转即可

13.3 源码展示
    <style>
        body {
            perspective: 1000px;}       
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;    /*保持子盒子div 3D立体空间*/
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
        }   
        section:hover {
            animation-play-state: paused;    /* 鼠标放入section 停止动画 */
        }        
        @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(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        
    </section>
</body>
14.浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

-moz-：代表 firefox 浏览器私有属性

-ms-：代表 ie 浏览器私有属性

-webkit-：代表 safari、chrome 私有属性

-o-：代表 Opera 私有属性

提倡写法：
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;
15.CSS3 思维导图总结