CSS3的新特性

「已注销」

已于 2023-11-26 15:43:00 修改

阅读量800

点赞数 20

文章标签： css 前端 css3

于 2023-11-26 15:39:37 首次发布

本文链接：https://blog.csdn.net/2301_80068547/article/details/134628642

版权

CSS3的现状

新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习∶新增选择器和盒子模型以及其他特性

CSS3 新增选择器

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

一、属性选择器

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

注：E代表元素，att代表属性名，val代表属性值

选择符	简介
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元素

<style>
    input[value] {
        color" pink;
    }
    input[type=password] {
        color" pink;
    }
</style>
/* 1.利用属性选择器就可以不用借助于类或者 id 选择器 */
<input type="text" value="请输入用户名">
<input type="password">

类选择器、属性选择器、伪类选择器权重都是10

二、结构伪类选择器

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

选择符	说明
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个

<style>
    /* 选择ul 里面的第一个小li */
    ul li:first-child {
        background-color: pink;
    }
    ul li:last-child {
        background-color: pink;
    }
</style>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

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

n 可以是数字，关键字和公式
n 可以是数字，就是选择第 n 个子元素，里面数字从1开始...
n 可以是关键字：even 偶数，odd 奇数 (可以用于表格隔行变色)
n 可以是公式：常见的公式如下 (如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略)

公式	取数
2n	偶数 (2,4,6,8,12...)，等价于even
2n+1	奇数 (1,3,5,7,9...)，等价于add
5n	5 10 15 ... (可用于去除外边距margin)
n+5	从第五个开始 (包含第五个) 到最后
-n+5	前5个 (包含第五个) ...

<style>
    /* 选择ul 里面的第2个小li */
    ul li:nth-child(2) {
        background-color: pink;
    }
    ul li:nth-child(even) {
        background-color: pink;
    }
    /* nth-child(n) 从 0 开始，每次加 1,这里面必须是 n，不能是其他字母 */
    ol li:nth-child(n) {
        background-color: pink;     // ol 里面的所有 li 都变成pink色
    }
</style>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<0l>
    <li></li>
    <li></li>
    <li></li>
</0l>

nth-child与nth-of-type的区别：

nth-child会把所有的盒子都排列序号，执行时首先看：nth-child(1) 之后回去看前面 div是否匹配
nth-of-type 会把指定元素的盒子排列序号，，执行时首先看：前面 div，之后回去看 nth-child(1)是否匹配

<style>
    // nth-child会把所有的盒子都排列序号
    section div:nth-child(1) {
        background-color: red;
    }
    section div:nth-of-type(1) {
        background-color: blue;
    }
</style>
<section>
    <p>光头强</p>      // 1号
    <div>熊大</div>   // 2号
    <div>熊二</div>   // 3号
<section>

三、伪元素选择器

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

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

注意：

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面创建元素
伪元素选择器和标签选择器一样，权重为1

<style>
    div::before {
        content: '你';   /* content值可 以为空 */
        display: block;
        width: 50px;    
        height: 50px;
        background-color: pink;
    }
    div::after {
        content: 'friend';
    }
</style>
<div>
    是
</div>

CSS3 盒子模型

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 宽度)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

CSS3图片模糊处理

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

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

CSS3计算盒子宽度calc函数

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

width: calc(100% -80px)     /*子盒子根据父盒子宽度再减去80像素*/

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

CSS3 过渡

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

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

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

经常和 :hover 一起搭配使用。

transition: 要过渡的属性  花费时间  运动曲线  何时开始

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

记住过渡的使用口诀：谁做过渡给谁加

<style>
    div {
        width:  200px;
        height: 100px;
        background-color: pink;
        /* 如果想要写多个属性，利用逗号进行分割 */
        transition: width .5s,height .5s;       /* 是根据下面的 div:hover */
        /* 如果想要多个属性都变化，属性写 all 既可以了*/
        transition: all 0.5s;
    }
    div:hover {
        width: 400px;
        height: 200px;
        background-color: skyblue;
    }
</style>
<div></div>

CSS3 2D转换
CSS3 动画
CSS3 3D转换

CSS3 2D转换

转换 (transform) 是CSS3 中具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果

转换 (transform) 你可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

一、二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

二、2D转换之移动

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

语法

transform: translate(x,y);  或者分开写
transform: translateX(n);
transform: translateY(n);

重点

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

<style>
    div {
        width: 200px;
        height: 200px;
    }
    div:first-child {
        /* x就是x轴上移动位置，y就是在y轴上移动位置，中间用逗号分隔 */
        transform: translate(100px,100px);
        background-color: pink;
    }
    div:last-child {
        background-color: purple;   
    }
</style>
<div></div>
<div></div>

案例：盒子水平垂直居中

<style>
    div {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        background-color: purple;
        /* 以前做法 */
        /*margin-top: 50%;
        margin-left: 50%; */
        /* 盒子往上走自己高度的一半，宽度的一半 */
        transform: translate(-50%, -50%);
    }
</style>
<div>
    <p></p>
</div>

三、2D转换之旋转

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

语法

transform: rotate(度数)

重点：

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

<style>
    div {
        width: 150px;
        height: 150px;
        background-color: pink;
        transform: rotate(45deg);
    }
</style>
<div></div>

案例：三角形

<style>
    div {
        width: 249px;
        height: 35px;
        border: 1px solid #000;
    }
    div::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
    }
    
</style>
<div></div>

四、设置2D转换中心点

我们可以设置元素转换的中心点

语法

transform-origin: x y;

重点

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

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 1s;
        transform-origin: left bottom;
    }
    div:hover {
        transform: rotate(360deg);
    }
</style>
<div></div>

案例：旋转案例

<style>
    div {
        width: 50px;
        height: 50px;
        border: 1px solid pink;
        margin: 100px auto;
    }
    div::before {
        content:"黑马";
        display: block;
        width: 100%;
        height: 100%;
        background-color: hotpink;
        transform-origin: left bottom;
        transform: rotate(180deg);
        transition: all 1s;
    }
    div:hover::before {
        transform: rotate(0deg);
    }
</style>
    <div></div>

五、2D转换之缩放

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

语法

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)：缩小
sacle 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all .4s;
    }
    （
    div:hover {
        /* 修改了宽度为原来的2倍，高度不变 */  
        transform: scale(2, 1);
        
        /* 设置缩放中心点 */
        transform-origin: left bottom;
    }
</style>

<div></div>

案例：图片放大

<style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }

        div img {
            width: 200pxpx;
            height: 200px;
            transition: all .6s;
        }

        div img:hover {
            transform: scale(1.1);
        }
    </style>

<div>
        <a href="#"><img src="d:\Desktop\网页设计\Photo\产品模块案例.png" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="d:\Desktop\网页设计\Photo\产品模块案例.png" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="d:\Desktop\网页设计\Photo\产品模块案例.png" alt=""></a>
    </div>

六、2D转换综合写法

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

<style>
    div {
        width: 150px;
        height: 150px;
        background-color: pink;
        transition: all .4s;
    }
    div:hover {
        transform: translate(150px,50px) rotate(180deg);
    }
</style>

<div></div>

动画

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

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

一、动画的基本使用

制作动画分为两步：

先定义动画
再使用 (调用) 动画

用 keyframes 定义动画 (类似定义类选择器)

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

元素使用动画

div {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}

动画序列

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

<style>
    /* 我们想页面一打开，一个盒子就从左边走到右边 */
    /* 1.定义动画 */
    @keyframes move {
        0% {
            transform: translateX(0px);

        }

        100% {
            transform: translateX(1000px);
        }
    }

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        animation-name: move;
        animation-duration: 3s;
    }
</style>

<div></div>

二、动画常用属性

属性	描述
@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"，还有"pause"。(可以用在鼠标经过，停止动画，鼠标离开继续动画)
animation-fill-mode	规定动画结束后状态，保持结束状态forwards，回到起始状态 backwards

三、动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

animation: myfirst 5s linear 2s infinite alternate;

案例：热点图案例

<style>
    .map {
        position: relative;
        width: 747px;
        height: 616px;
        background: url(../images/大数据热点图.png) no-repeat;
        
    }
    /* 点位到具体位置 */
    .city {
        position: absolute;
        top: 227px;
        right: 193px;
        color: #fff;
    }
    /* 设置小圆点 */
    .dotted {
        width: 8px;
        height:8px;
        background-color: #09f;
        border-radius: 50%;
    }
    .city div[class^="pulse"] {
        /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散,因为盒子默认的中心是左上角 */
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        box-shadow: 0 0 12px #09f;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
    }
    
    .map div.pulse2 {
        animation-delay: 0.4s;
    }
    .map div.pulse3 {
        animation-delay: 0.8s;
    }
    
    @keyframes pulse {
        0% {}
        70% {
        /* transform: scale(3); 我们不要用scale，因为它会让阴影变大 */
            width: 40px;
            height: 40px;
            opacity: 1;     /* 没学过，不过与阴影有关 */
        }
        100% {
            width: 70px;
            height: 70px;
            opacity: 0;
        }
    }
</style>

<div class="map">
    <div class="city">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
    </div>
</div>

四、速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是 "ease"

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认，动画以低速开始，然后加速，在结束前变慢
ease-in	动画以低速开始。
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)

<style>
    div {
        width: 0;
        height: 30px;
        background-color: pink;
        /* steps 就是分几步来完成我们的动画，有了steps就不要写ease或者linear了*/
        animation: w 4s steps(5) forwards;  /* 类似于回血 */
    }
</style>

<div></div>

案例：小熊奔跑

<style>
    div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(../images/小熊.png) no-repeat;
        /* 我们元素可以添加多个动画，用逗号分隔 */
        animation: bear 1s steps(8) infinite, move 1s forwards;
    }

    @keyframes bear {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -1600px 0;
        }
    }

    @keyframes move {
        0% {
            left: 0;
        }

        100% {
            left: 50%;
            /* 让小熊水平居中 */
           transform: translateX(-50%);
        }
    }
</style>

<div></div>

CSS3 3D转换

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

有什么特点

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

当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果。

一、三维坐标系

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

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轴方向。

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

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

语法：

transform: translate3d(x, y, z)

代码演示:

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: translateX(100px);
        transform: translateY(100px);
        
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
/* transform: translate3d(x, y, z); */
transform: translate3d(100px, 100px, 0)
    }
</style>

<div></div>

三、3D透视 perspective

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

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

透视需要写在被视察元素的父盒子上面

d：就是视距，视距就是指人的眼睛到屏幕的距离
z：就是 z 轴，物体距离屏幕的距离，z 轴越大(正值)，我们看到的物体就越大

body {
  /* 值越小，视距越小，(近小远大)，图像越大 */ 
  perspective: 1000px;
}

四、translateZ

translateZ 与 perspecitve的区别

perspecitve 给父级进行设置，translateZ 给子元素进行设置不同的大小
案例：

body {
    perspective: 500px;
}

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    transform: translateZ(0);
}

五、3D 旋转rotate3d

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

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

代码案例:

<style>
    div {
        perspective: 200px;
    }

    img {
        display: block;
        margin: 100px auto;
        transition: all 1s;
    }

    img:hover {
        /* 上下旋转 */
       /*  transform: rotateX(-45deg); */
       /* 左右旋转 */
        /*  transform: rotateY(45deg); */
    }
</style>

<div>
  <img src="../images/两面旋转盒子.png" alt="">
</div>

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

左手准则

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

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

rotateZ的旋转方式类似于转盘

transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度 (了解即可)

xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

transform: rotate3d(1,0,0,45deg) 就是沿着x轴旋转45deg
transform: rotate3d(1,1,0,45deg) 就是沿着对角线旋转45deg

3D呈现 transfrom-style

控制子元素是否开启三维立体环境

transform-style: flat 代表子元素不开启 3D 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用
案例：3D呈现transform-style

<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>

<div class="box">
  <div></div>
  <div></div>
</div>

案例：旋转木马

<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>

<section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</section>

案例：两面翻转的盒子

<style>
    body {
        perspective: 400px;
    }

    .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .4s;
        /* 让背面的紫色盒子保留立体空间 给父级添加的 */
        transform-style: preserve-3d;
    }

    .box:hover {
        transform: rotateY(180deg);
    }

    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 300px;
    }

    .front {
        background-color: pink;
        z-index: 1;
    }

    .back {
        background-color: purple;
        /* 像手机一样 背靠背 旋转 */
        transform: rotateY(180deg);
    }
</style>


<div class="box">
    <div class="front">小猪佩奇</div>
    <div class="back">pink老师</div>
</div>

案例：3D导航栏

1. 搭建HTML结构

<ul>
    <li>
        <div class="box">
            <div class="front"></div>
            <div class="bottom"></div>
    </li>
</ul>

li 是做导航栏
.box 是翻转的盒子，front是前面盒子，bottom是底下盒子

2.搭建CSS结构

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all .4s;
        
    }
    .box:hover {
        transform: rotateX(90deg);
    }
    ul {
        margin: 100px;
    }
    ul li {
        width: 120px;
        height: 35px;
        list-style: none;
        /* 一会我们需要给box旋转也需要透视，干脆给li加里面的子盒子都有透视效果 */
        perspective: 500px;
    }
    .front,
    .bottom {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .front {
        background-color: pink;
        z-index: 1;
        transform: translateZ(18.5px);
    }
    .bottom {
        background-color: purple;
        /* 这个x轴一定是负值 */
        /* 我们如果有移动或者其他样式，必须先写我们的移动 */
        transform: translateY(17.5px) rotateX(-80deg) ;
    }
</style>