CSS学习笔记
CSS————想让界面更好看吗？他来啦！！！
初识CSS————CSS的引入方式
引入方式有三：
· 内部样式表：（学习使用）CSS代码写在style标签中；
· 外部样式表：（开发使用）CSS代码写在单独的CSS文件中（.css），在HTML中使用标签引入；
示例：
<link rel="stylesheet" href="./my.css">·行内样式：（配合Javascript使用）CSS代码写在标签的style属性值里。
示例：
<div style="color:red;font-size:20px;">这是div标签</div>选择器
标签选择器
顾名思义就是使用标签名来当作选择器，会选中同名标签设置相同的样式。
例如：p , div , img , a …
示例：
<style>
p{
color:red;
}
</style>
<body>
<p>测试文字</p>
</body>
//会看到测试文字颜色变为红色！类选择器
作用：查找标签，差异化设置标签的显示效果。
使用步骤：定义类选择器–>.类名（ . 不可忽略！） ； 使用类选择器–>标签添加class=”类名”。
一个类选择器可以给多个标签使用！一个标签只可以加一个class属性，如果要加多个，请看示例：
<style>
.red{
color:red;
}
.size{
font-size:50px;
}
</style>
<body>
<p class="red size">测试文本</p>
//在要使用的不同的选择器名中间打空格
</body>类名取名方式：名字有多个单词可以用-连接！！！
id选择器
作用：查找标签，差异化设置标签的显示效果；
场景：一般配合JavaScript使用。
使用步骤：
定义id选择器–#id名字 ；使用id选择器–标签添加id=”id名”。
<style>
#red{
color:red;
}
</style>
<body>
<p id="red">测试文本</p>
</body>通配符选择器
作用：查找页面所有标签，设置相同样式；
特点：* ， 不需要调用，浏览器自动查找页面所有标签，设置相同的样式；
<style>
*{
color:green;
font-size:30px;
}
</style>
<body>
<p>测试文本</p>
</body>选择器的应用实践————画盒子（给文字添加背景）
需要掌握的三个新的属性：
width — 宽；
height — 高；
background-color — 背景颜色。
示例：
<style>
.redbox{
font-size:30px;
color:white;
background-color:red;
width:100;
height:100;
}
</style>
<body>
<p class="redbox">红色的盒子</p>
</body>文字控制属性
常见的有：
font-size ：字体大小；（带上单位px！一定要有单位！）
font-weight : 字体粗细；(属性值：正常–400 or normal ； 加粗–700 or bold 。开发中多用数字写法。)
font-style : 字体倾斜； （属性值：正常–normal ； 倾斜–italic）
line-height : 行高； （属性值：数字+px单位 & 数字（当前font-size属性值的倍数））
行高 = 上间距+文字、文本高度+下间距
（这个属性可以设置文字在上面画的盒子中的位置！！！）
font-family : 字体族（字体样式）；（属性值：字体名）
font : 字体复合属性；
*{
font:italic 700 30px/2 楷体;
//font属性可以同时添加多个不同的属性，但要注意按照顺序：字体是否倾斜 字体是否加粗 字号/行高 字体;
}注意！字号和字体属性必须书写，否则font属性不生效！
text-indent : 文本缩进；（属性值：数字+px or 数字+em（1em=当前标签字号的大小））
text-align ； 文本对齐；（属性值：；left 、 center 、 right）
只改变文本位置，不改变标签位置！！！
还可以设置图片对其位置！！！请看示例：
<style>
div {
text-align:center;
}
</style>
<body>
<div>
<img src="./test.png" alt="测试图片" target="这是一张测试用的图片">
</div>
</body>text-decoration : 修饰线；（属性值：none–无修饰线 ； underline–修饰线 ； line-through–删除线 ； overline–上划线）
color : 字体颜色。 （补充写法：rgba（r,g,b,a），其中a的取值范围是0-1，代表透明度！ ； 十六进制写法：实际开发中一般从设计稿中复制）
复合选择器
特点：由多个基础选择器通过不同的方式组合而成；
作用：更准确、更高校的选择目标元素（标签）。
后代选择器
作用：选中某元素的后代元素；
写法：父选择器 （空格） 子选择器 {CSS属性}；
示例：
<style>
div span{
color:red;
}
</style>
<body>
<div>
<span>测试文本</span>
<p>
<span>测试文本2</span>
</p>
</div>
</body>可以看到，div标签下带有span标签的内容都变成了红色————所有的后代都会被选中！！！
子代选择器
作用：只选中子代（距离最近的元素）；
写法：父选择器>子选择器 {CSS属性}；
示例：
<style>
div > span{
color:red;
}
</style>
<body>
<div>
<span>测试文本</span> //变红（儿子）
<p>
<span>测试文本2</span> //不会变红（孙子）
</p>
</div>
</body>并集选择器
作用：选择多组标签，设置相同的样式；
写法：选择器1,选择器2,选择器3,…,选择器N {CSS属性} （选择器之间用,隔开）；
示例：
<style>
div,span,p{
color:red;
}
</style>
<body>
<div>测试文本1</div>
<span>测试文本2</span>
<p>测试文本3</p>
</body>可以看到，div、span、p标签包裹的内容都变红了！！！
交集选择器
作用：选中同时满足多个条件的元素；
写法：选择器1选择器2…{CSS属性} （选择器之间没有符号！如果有标签选择器，必须要放在最前面！！！）
示例：
<style>
p.box{
color:red;
}
</style>
<body>
<p class="box">测试文本</p>
</body>伪类选择器
作用：表示元素状态，选中元素的某个状态设计样式。
状态有：
鼠标悬停状态
写法：选择器：hover{CSS属性}
示例：
<style>
p:hover{
color:yellow;
}
</style>
<body>
<p>测试文本</p>
</body>拓展————伪类之超链接的状态
超链接有以下几个状态：
:link – 访问前；
:visited – 访问后；
:hover – 鼠标悬停；
:active – 点击时（激活）。
如果要给超链接设置以上几个状态的话，要严格按照link、visited、hover、active的顺序来写！！！
背景属性
常用的背景属性一览：
背景色 — background-color ;
背景图 — background-image ;
背景图平铺方式 — background-repeat ;
背景图位置 — background-position ;
背景图缩放 — background-size ;
背景图固定 — background-attachment ;
背景复合属性 — background ;
示例：
<style>
div {
width : 400px; //先设置盒子的大小
height : 400px;
background-image : url(./images/1.png);
//注意！背景图默认平铺效果，且在文字下方
background-repeat : no-repeat;
background-position : -50px 0; //正数向左/下 ， 负数向右/上。
//Or background-position : left top;
background-size : 100px;
background-attachment : fixed; //设置背景图不跟随元素内容滚动
}
</style>背景图平铺方式：
no-repeat — 不平铺 ；
repeat — 平铺 ；
repeat-x — 水平方向平铺 ；
repeat-y — 竖直方向平铺 。
背景图位置：
关键词设置：
left — 左侧 ；
right — 右侧 ；
center — 居中 ；
top — 顶部 ；
bottom — 底部 ；
坐标设置：
数字 + px （正负都可以）。
背景图大小：
关键词设置：
cover — 等比例缩放背景图片以完全覆盖背景区；
contain — 等比例缩放背景图片以完全放入盒子中；
百分比设置：
根据盒子的大小来计算图片尺寸；
数字设置：
数字 + 单位（例如：px）。
背景图复合属性写法：
background : 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（一定要用空格隔开！！！位置写法(示例)：center/top）
显示模式
块级元素
特点：
①独占一行；
②宽度默认为父级的100%；
③添加宽高属性可生效。
示例：
<style>
div{
width : 100px;
height : 100px;
}
.div1{
background-color : red;
}
.div2{
background-color ； yellow;
}
</style>
<body>
<div class="div1">块级元素1</div>
<div class="div2">块级元素2</div>
</body>行内元素
特点：
①一行可共存多个；
②尺寸由内容多少来决定；
③添加宽高属性不生效。
示例：
<style>
span{
background-color : green;
}
</style>
<body>
<span>行内元素114514</span>
</body>行内块元素
特点:
①一行共存多个；
②默认尺寸由内容撑开；
③添加宽高属性可生效。
示例：
<style>
img{
width : 100px;
height : 100px;
}
</style>
<body>
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
</body>转换显示模式
属性名：display
属性值：
block – 块级；
inline-blokc – 行内块；
inline – 行内。
示例：
<style>
div{
height : 100px;
width : 100px;
display : inline-block;
}
</style>结构伪类选择器
作用：根据结构的元素关系查找元素。
写法：
E:first-child{} – 查找第一个E元素；
E:last-child{} – 查找最后一个E元素；
E:nth-child(N){} – 查找第N个E元素。
示例：
<style>
p:first-child {
background-color : red;
}
p:last-child{
background-color : green;
}
p:nth-child(4){
background-color : orange;
}
</style>
<body>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
<p>第六个p元素</p>
</body>伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
写法：
常用的有两个：
E::before — 在E元素里面最前面添加一个伪元素；
E::after — 在E元素里面最后面添加一个伪元素。
注意：
必须设置content:”” 属性，用来设置伪元素的内容，如果没有内容，则引号留空即可；
伪元素默认是行内显示模式；
权重和标签选择器相同。
示例：
<style>
div{
width:30px;
height:30px;
background-color:white;
}
div::before{
content:"I "; //必须设置content属性！否则伪元素选择器不生效！！！
background-color:pink;
display:block; //默认为行内显示！！！！
}
div::after{
content:" You!";
background-color:red;
}
</style>
<body>
<div>Love</div>
</body>运行代码我们就可以看到，显示内容是：I Love You!
盒子模型
作用：布局网页，摆放盒子和内容。
重要组成部分：
内容区域 – width & height;
内边距 – padding(出现在内容与盒子边缘之间);
边框线 – border;
外边距 – margin(出现在盒子外面);
示例：
<style>
div{
width:200px;
height:200px;
background-color:blue;
padding: 50px;
border: 1px solid red;
margin: 50px;
}
</style>盒子模型 – 边框线
属性名：border;
属性值：边框线粗细 、 线条样式 、 颜色（不区分顺序！）；
设置单方向边框线：
属性名：border-方位名词；
属性值：边框线粗细 、 线条样式 、 颜色（不区分顺序）；
盒子模型 – 内边距
作用：设置内容与盒子边缘之间的距离；
属性名：padding/padding-方位名词；
多值写法：
四个值：10px 20px 10px 20px (分别对应上右下左)；
三个值：上 左右（一样） 下；
两值： 上下 左右；
盒子模型 – 外边距
属性名：margin；
提示：与padding的写法相同，这里不再赘述。
清除默认样式
清除标签默认的样式，比如：默认的内外边距。
示例:
<style>
//清除默认内外边距
* {
margin : 0;
padding : 0;
}
//去掉列表的项目符号
li {
list-style: none;
}
</style>盒子模型 – 元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow；
属性值 以及 效果：
hidden – 溢出隐藏；
scroll – 溢出滚动（无论是否溢出，都显示滚动条位置）；
auto – 溢出滚动（溢出才显示滚动条位置）；
外边距问题
合并现象
场景：垂直排列的兄弟元素，上下margin会合并；
现象：取两个margin中的较大值生效；
塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题；
现象：导致父级一起向下移动；
解决方法：取消子级margin ， 父级设置padding；
或者：父级设置overflow：hidden 、 父级设置border-top；
行内元素 – 内外边距问题
行内元素（span）无法改变内容位置，解决方法是：添加line-height（行高）属性。
盒子模型 – 圆角
作用：设置元素的外边框为圆角；
属性名：border-radius；
属性值：数字+px/百分比；
提示：属性值是圆角半径；
示例：
<style>
div{
border-radius : 20px 20px 20px 20px; //跟padding的多值写法差不多
}
</style>盒子模型 – 阴影
作用：给元素设置阴影效果；
属性名：box-shadow；
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色
注意：
· X轴和Y轴偏移量必须书写；
·默认是外阴影，内阴影要加inset；
示例：
<style>
div {
box-shadow: 2px 5px 10px 1px black inset; //内阴影
}
</style>书写相关注意事项
CSS书写顺序：
1·盒子模型属性；
2·文字样式；
3·圆角、阴影等修饰属性。
标准流
什么是标准流？
标准流也叫文档流，指的是标签在网页中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
浮动
作用：让块元素水平排列。
属性名：float；
属性值：
· left – 左对齐；
· right – 右对齐；
浮动的盒子之特点：
· 顶对其；
· 具备行内块特点；
· 脱标。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.product {
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: goldenrod;
}
.left {
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.right {
float: right;
width: 978px;
height: 628px;
background-color: brown;
}
.right li {
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
float: left;
}
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class = "product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）；
解决方法：清除浮动（清除浮动带来的影响）。
具体清除方法：
一 – 额外标签法：在父元素内容的最后添加一个块级元素，设置CSS属性clear: both；
.clearfix {
clear: both;
}二 – 单伪元素法：
.clearfix::after {
content: ""; /*伪元素要生效必须要配合content属性才可以实现！*/
display: block;
clear: both;
}三 – 双伪元素法：
.clearfix::before,
.clearfix::after {
content: ""; /*伪元素要生效必须要配合content属性才可以实现！*/
display: table;
}
.clearfix::after {
clear: both;
}四 – overflow方法：
父元素添加CSS属性overflow: hidden。
注意是加给浮动的父级！！！
flex布局
Flex – 认识
Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对其能力；
Flex模型不会产生浮动布局中脱标的现象（当父级元素没有高度时，子级内容依旧可以撑开父级的高度），布局网页更灵活、简单（更适合结构化的布局）。
Flex – 组成
设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸。
组成部分：
· 弹性容器；
· 弹性盒子；
· 主轴：默认在水平方向；（弹性盒子沿着主轴方向排列）
· 侧轴/交叉轴：默认在垂直方向。
Flex – 布局
(描述 – 属性)
创建flex容器 – display: flex;
主轴对齐方式 – justify-content;
(属性值 – 效果)
flex-start – 默认值，弹性盒子从起点开始依次排列；
flex-end – 弹性盒子从终点开始依次排列；
center – 弹性盒子沿主轴居中排列；
space-between – 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间；
space-around – 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间；
space-evenly – 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。
侧轴对齐方式 – align-items;
某个弹性盒子侧轴对齐方式 – align-self;
修改主轴方向 – flex-direction;
弹性伸缩比 – flex;
弹性盒子换行 – flex-wrap;
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在这一行显示。
属性名：flex-wrap;
属性值：wrap – 换行；nowrap – 不换行；
行对齐方式 – align-content;
属性名：align-content; 对单行弹性盒子不生效(nowrap)
属性值: flex-start : 默认值，弹性盒子从起点开始依次排列；
flex-end : 弹性盒子从终点开始依次排列；
center ：弹性盒子沿主轴居中排列；
space-between ：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间；
space-around ：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧；
space-evenly ：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。
CSS案例项目
准备工作 – 项目目录与版心
项目目录
项目目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、图片、JavaScript等。
· images文件夹：存放固定使用的图片素材；
· uploads文件夹：存放非固定使用的图片素材；
· css文件夹：存放CSS文件（link 标签引入）
base.css：基础公共样式（清楚默认样式、设置网页基本样式等）；
index.css：首页CSS样式；
index.html：首页HTML文件。
版心效果
版心样式示例：
.wrapper {
margin: 0 auto;
width: 1200px;
}网页制作思路
1 – 布局思路：先整体再局部，从外到内，从上到下，从左到右；
2 – CSS实现思路：①画盒子，调整盒子范围→宽高背景色；
②调整盒子位置→flex布局内外边距；
③控制图片、文字内容样式。
后续就不记录了，可以跟着一步步做
定位
作用：灵活的改变盒子在网页中的位置。
实现：
1 – 定位模式：position；
2 – 边偏移：设置盒子的位置。（left , right , top , bottom）
相对定位
示例：
div {
position: relative; /* 定位模式：相对定位 */
top: 100px; /* 边偏移属性 - (相对于原来的位置下移100px距离) */
left: 20px;
}相对定位并不会脱标，会保持占位，改变位置的参考坐标是元素自身原先的坐标，且标签显示模式在相对定位后不会改变。
绝对定位
使用场景：子级绝对定位，父级相对定位。（子绝父相）
示例：
div {
position: relative;
top: 100px;
left: 100px;
}
div .block {
position: absolute;
top: 0px;
right: 0px; /* 移动到父级的右上角 */
}相对定位的特点：
1 – 脱标，不占位；
2 – 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改变位置；
3 – 显示模式在绝对定位后会发生变化：宽高生效（具备了行内块的特点）。
固定定位
div {
position: fixed;
}特点：
1 – 脱标，不占位；
2 – 参照物：浏览器窗口;
3 – 显示模式特点：具备行内块的特点。
字体图标
字体图标：展示的是图标，本质是字体；
作用：在网页中添加简单的、颜色单一的小图标。
优点：
灵活性：灵活地修改样式，例如：颜色、尺寸等；
轻量级：体积小、渲染快、降低服务器请求次数；
兼容性：几乎兼容所有主流浏览器。
使用方法：先下载再使用。
字体图标 – 下载字体
· iconfont 图标库：https://www.iconfont.cn/ (国内常用图标库);
· 下载字体。
字体图标 – 使用
· 引入字体样式表（inconfont.css）;
· 标签使用字体图标类名：
- iconfont: 字体图标基本样式（字体名、字体大小等）；
- icon-xxx: 图标对应的类名：
<span class="iconfont icon-xxx"></span>
完整示例：
<head>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont { /* 用文字的属性就可以控制（字体）图标的外观 */
font-size: 200px;
color: blue;
}
</style>
</head>
<body>
<span class="iconfont icon-xxx"></span>
</body>注意：字体样式自身自带的css样式使用类选择器，有些情况优先级更高，在调整图标属性时要注意选择器的优先级。
垂直对齐方式
属性名：vertical-align;
属性值：
baseline – 基线对齐（默认）；
top – 顶部对齐；
middle – 居中对齐；
bottom – 底部对齐.
过渡属性
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。
属性名：transition（复合属性）；
属性值：过度的属性 花费时间（s）。
提示：
· 过渡的属性可以是具体的CSS属性；
· 也可以为all（两个状态属性值不同的所有属性）都产生过渡效果；
· transition设置给元素本身。
示例：
img {
height: 100px;
width: 100px;
transition: all 1s; /* transition属性添加给标签本身！ */
}
img:hover {
width: 200px;
height: 200px;
}
/* 效果：鼠标悬浮到img标签的元素（图片）上后，图片会再1s的时间内变大，当鼠标离开，再以相同时间进行缩小 */修饰属性 – 透明度（opacity）
作用：设置整个元素的透明度（包含背景和内容）。
属性名：opacity；
属性值：0 – 1;
示例：
img {
width: 100px;
height: 100px;
opacity: 1;
transition: opacity 1s;
}
img:hover {
opacity: 0.5;
}修饰属性 – 光标类型（cursor）
作用：改变鼠标悬停在元素上时指针显示样式。
属性名：cursor；
属性值：
· default – 默认值，通常是箭头；
· pointer – 小手效果，提示用户可以点击；
· text – 工字形，提示用户可以选择文字；
· move – 十字光标，提示用户可以移动。
示例：
div {
width: 200px;
height: 200px;
cursor: pointer; /* 鼠标移动到此div元素上后就会变为小手喵~ */
}平面转换 – transform
作用：为元素添加动态效果，一般与过渡配合使用；
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）；
属性：
· 平移：transform:translate(x轴移动距离,y轴移动距离)； translate只写一个值，表示沿着x轴移动；单独设置x或y轴移动距离：translateX()或translateY()；
· 旋转：transform:rotate(正数 – 顺时针 / 负数 – 逆时针 deg);
· 改变转换原点：
默认下原点为盒子的中心点(center)；
属性：transform-origin: 水平原点位置 垂直原点位置；
取值：
①方位名词（left , top , right , bottom , center）;
②像素单位数值；
③百分比。
` 缩放：transform:scale(缩放倍数);
transform:scale(X轴缩放倍数, Y轴缩放倍数);
· 倾斜：transform:skew(角度度数deg);
示例：
div {
width: 100px;
height: 100px;
transition: all 1s;
}
div:hover {
transform: translate(800px) rotate(180deg) scale(2) skew(90);
/* 移动800px 旋转180度 缩放放大2倍 翻转90度 */
}渐变
定义：多个颜色逐渐变化的效果，一般用于设置盒子背景。
分类：线性渐变 & 径向渐变。
线性渐变
属性：background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
眼色2 终点位置,
……
);
取值：
渐变方向：
to 方位名词
角度度数
终点位置：
百分比
如果要设置透明色：transparent！
示例：
div {
width: 200px;
height: 200px;
background-color: green;
background-image: linear-gradient(
to right, /* 实现从左到右的红到绿的渐变 */
/* 45deg 也可以用度数哦！ */
red 80%, /* 增大红色占用面积的占比 */
green
);
}径向渐变
颜色从中间开始向外逐步变化，可以给按钮添加高光效果！~
属性：
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
……
);
取值：
半径可以是2条，则为椭圆；
圆心位置取值：像素单位数值/百分比/方位名词。
示例：
div {
background-image: radial-gradient(
50px at center center,
red,
pink 50%,
transparent
);
}空间转换
属性：transform
空间转换 – 平移
属性：
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
视距 perspective
作用：指定了观察者与z=0平面的距离，为元素添加透视效果；
透视效果：近大远小、近实远虚。
写法：
div {
perspective: 1000px; /* 建议取值范围：800-1200px */
}空间转换 – 旋转
属性：
transform: rotateZ();
transform: rotateX();
transform: rotateY();
transform: rotate3d(x, y, z, 角度度数) : 用来设置自定义轴的位置及旋转角度；
（其中xyz取值为0-1之间的数字）。
立体呈现
作用：设置元素的子元素是位于3D空间中还是平面中。
属性名：transform-style。
属性值：
flat：子级处于平面中；
preserve-3d：子级处于3D空间。
示例（这里先只加前后两个面）：
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 2s;
transform-style: preserve-3d; /* 设置子级元素处于3D空间中 */
transform: rotateY(80);
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
transform: translateZ(100px);
}
.back {
background-color: green;
transform: translateZ(-100px);
}