使用

*{}

2.2 复合选择器

• 后代选择器

  父级 子级 …{}

• 选择元素或元素组的子孙后代

父级>子级{}

• 只选择子级

既是又是
• eg:

  p.hello{}

  （既是p标签又是hello类）

eg:

span,div{}

（span和div标签）

a:link

未访问链接状态

• a:visited

  访问过的链接状态

• a:hover

  鼠标移动上去的链接状态

• a:active

  点击时的链接状态

• 连接顺序 l,v,h,a(love hate) 顺序不对会出错

2.3 CSS3属性选择器

• 交集选择器

2.4 CSS3结构伪类选择器

• n数字
• 关键字even偶数
• odd奇数

公式是带有n的公式，n从0开始
• 第零个元素和超出的元素都会被忽略
• eg: -n+5 –> 1,2,3,4,5…….

background:顺序不严格要求(一般是 color url repeat attachment position)

padding

一个值 –> 上&右&下&左
• 两个值 –> 上&下 左&右
• 三个值 –> 上 左&右 下
• 四个值 –> 上 右 下 左

7.3 盒子大小

• 盒子实际大小=内容宽度+内边距+边框

7.4 外边距

• 复合写法

  margin

  一个值 –> 上&右&下&左

• 两个值 –> 上&下 左&右
• 三个值 –> 上 左&右 下
• 四个值 –> 上 右 下 左

7.5 块级盒子水平居中

• text-align文字居中对齐和行内块元素居中对其
• 必须有宽度
• 左右边距设置为automargin-left:auto&margin-right=auto
• margin:auto
• margin:0 auto

7.6 插入图片和背景图片

• 一般来说，插入图片的使用场景更多
• 插入图片放在盒子中改变可以使用padding
• 背景图片改变位置可以使用background-position

7.7 清除元素默认的内外边距

*{margin:0;padding:0;}

• 行内元素尽量只设置左右边距，上下边距可能无法使用

7.8 垂直外边距合并

• 对于垂直外边距会发生合并，水平外边距不会合并
• 上下两个盒子，上面盒子有上边距，下面盒子有上边距，则这两个盒子之间的距离为这两个边距的最大值
• 解决方法不设置上边距或下边距

• float

• position:relative

7.9 嵌套关系的垂直内边距合并

• 父盒子和子盒子嵌套关系，如果父盒子和子盒子都有内边距，那么内边距发生合并，合并之后为最大内边距的值

• 解决方案

  为父盒子指定上边框

• 为父盒子指定上内边距
• 为父盒子添加overflow:hidden

7.10 盒子的稳定性

• width > padding > margin

7.11 圆角边框

• border-radius:length/percent

• 正方形变为圆形 percent=50%|length=width/2
• 矩形普通变换 length=height/2

7.12 盒子阴影

• box-shadow: h-shadow水平阴影(必选) v-shadow垂直阴影(必选) blur模糊距离 spread阴影尺寸 color阴影颜色 insert内/外阴影(outset、insert)

8. 设置浮动

8.1 行内块实现浮动效果的缺点

• 行内块实现的div一行排列中间会出现缝隙，而且缝隙很难去掉，而且缝隙距离不好确定

8.2 浮动作用

• 脱离普通标准流
• 移动到指定位置
• 可以让div一行显示，可以实现盒子的左右对齐，可以实现文字环绕效果

8.3 语法

• float
• 属性值：none、left、right

8.4 浮动的特性

• 浮动的元素是漂浮在普通流之上的，脱离标准流，脱标
• 浮动的盒子会把原来的位置给下面的盒子
• float会改变display属性值，使之相当于变为inline-block，但是之间没有缝隙
• 如果父级盒子装不下浮动，就会挤到下一行

8.5 浮动技巧

• 可以给浮动添加标准流的父盒子，可以最大化减少对其它标准流的影响

8.6 浮动元素和其它盒子的关系

8.6.1 与父盒子的关系

• 子盒子在父盒子的内容部分
• 不会超过边框和内边距

8.6.2 与兄弟盒子的关系

• 注意浮动与不浮动
• 上一个盒子不浮动，下一个盒子浮动=上一个盒子不浮动，下一个盒子不浮动
• 浮动只会只会影响其后面的浮动，不会影响前面的浮动

9. 清除浮动

9.1 为什么要清除浮动

• 左右排列时，父盒子是不方便给高度
• 在标准流中，子盒子是可以撑开父盒子的高度，但是浮动流时是不能撑开的

9.2 清除浮动的本质

• 为了解决子盒子浮动而导致父盒子(未设置高度)的高度为0的情况

9.3 清除浮动的方法

clear:left/right/both

• 额外标签法在浮动元素的末尾加上空的标签，来清除两侧的浮动
• 如：

  <div style=\"clear:both\"></div>

• 书写简单，但是增加了额外的标签

给父级添加

overflow:hidden;

• 代码简单，但是，内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示出溢出的元素

.clear:after{content:””;display:block;height:0;visibility:hidden;clear:both};

• .clear{*zoom:1;}

  专门清除IE6、7的浮动

• 符合闭合浮动思想，结构语义化正确，但是，书写复杂，还要兼顾IE6，7

.clear:before,.clear:after{content=“”;display:table}

• .clear:after{clear:both;}

• .clear{*zoom:1;}

  专门清除IE6、7的浮动

10. 定位

10.1 描述

• 定位是用来布局的
• 定位=定位模式+边偏移

10.2 边偏移属性

10.4 定位模式

• position

• static——静态定位

  默认定位，无定位

• 静态定位按照标准流原来位置，没有边偏移

relative——相对定位

相对于其原来的位置来说的
• 原来在标准流中的区域继续占有，移动之后仍然为标准流

absolute——绝对定位

以==带有定位(!static)==的父级元素来定位

• 不保留位置，完全脱标

• 一般来说，子盒子为绝对定位，父盒子为相对定位

  display:inline-block

fixed——固定定位(特殊absolute)

以浏览器的可是窗口来定位
• 不保留位置，完全脱标

10.5 绝对定位盒子居中

• 绝对定位，margin:auto…不能让盒子水平居中对齐

• left:50%

  再

  margin-left:-box_width/2

10.6 堆叠顺序

• 对于绝对定位和固定定位，可能会发生堆叠

• z-index

• z-index的属性值开始正负整数和0，0是默认值，数值越大，盒子越上
• z-index的属性值要是相同的话，后来者居上

10.7 定位改变display属性

• display:inline-block

• folat:~

• position:absoute

10.8 注意

• 浮动元素和绝对定位都不会触发外边距合并问题

11. 网页布局总结(标准流、浮动、定位)

11.1 标准流

• 可以让盒子上下左右排序，但是标准流和标准流是不能够发上重叠的

11.2 浮动(会影响display)

• 可以要多个多个块级元素一行显示，可以左右来对齐盒子

  有定位的浮动流可以层叠

11.3 定位(可能会会影响float&display)

• 多个盒子层叠显示

12. 元素的显示和隐藏

12.1 display

• 隐藏对象

  display:none

• 隐藏并不保留位置
• 显示元素

  display:block

  使之显示&使之成为块级

12.2 visibility

• 隐藏

  visibility:hidden

• 隐藏并保留位置
• 显示

  visibility:visible

12.3 overflow

• 设置当前内容超过指定宽高如何管理内容

13. 用户界面样式

13.1 鼠标样式cursor

13.2 轮廓outline

• 设置轮廓线

  outline:outline-color||outline-style||outline-width

• 取消轮廓线

  outline:0;

• outline:none;

13.3 防止拖拽文本域resize

• resize:none

14. 垂直对齐 vertical-align

• 文字居中对齐

  text-align:center

• vertical-align

  只对行内元素和行内块元素有效

14.1 图片、表单和文字对齐

14.2 去除图片底侧空白缝隙

• div中放图片标签，底部会有空隙，原因是默认的是基线对齐
• 解决方法是，不要使图片基线对齐

15. 溢出的文字省略号显示

15.1 white-space

• white-space:normal

  默认处理方式，如果超过一行会强制换行

• white-space:nowrap

  如果超过一行不会强制换行，一行中显示所有的文本

15.2 隐藏文字

overflow:hidden

15.3 文字溢出显示方式

• text-overflow:clip

  对于超出部分，直接剪掉，不显示省略号

• text-overflow:ellipsis

  对于超出部分，显示省略号

16. 精灵技术

16.1 为什么使用精灵技术

• 一个网页中会用到许多图片，不使用精灵技术，一张图片要请求一次服务器。使用精灵技术，将多长小图放到一张图中，可以有效减少服务器的处理压力，提高性能

16.2 使用原理

• 对盒子加上精灵图的背景图片
• 再将要使用的精灵图的一部分移动到盒子的位置，让该部分在盒子中显示(类似于PS图层的处理)
• 主要利用background-position来调整图片

16.3 精灵图的制作

• 制作精灵图，就是将小图放到一张图中
• 一般背景图片不是用精灵图

17. 浮动门

• 左侧和右侧两个门是利用不同盒子来做的
• 右侧的盒子要右对齐
• 两个盒子要实现自由拉伸的效果，要用到inline-block

18. margin负值

• 负边距+定位=水平垂直居中
• 压住盒子的边框(浮动是紧贴在一起的，所以可以实现)
• 突出效果:由于压住盒子的边框时，border改变时会出现一条变压住，所以可以使用定位，定位的盒子在最上层
• 突出效果:如果都有浮动，会出现被压住线的情况，这时候就要使用

  z-index

19. 三角形

• 用边框可以模拟三角宽度高度都为0
• 四个边框都要指定
• 为了照顾低版本浏览器，要使用

  font-size:0;

  line-height:0;

20. 2D转换

20.1 移动

• transform:translate(x,y)

  x,y方向移动

• transform:translateX(x)

  x方向移动

• transform:translateY(y)

  y方向移动

• 不会影响其它盒子的位置(浮动和定位会影响其它盒子位置)
• 相对于原来位置移动
• x,y=value|percent(参照与盒子自身的宽高)
• 使盒子垂直居中这样可以不用计算，更准确，可以响应式布局
• 对于行内元素是无效的

20.2 旋转

• transform:rotate(deg)

  顺时针旋转

• 设置转换的中心点

  transfrom-origin:x y

  （x,y=direction|value）(默认50% 50%)

20.3 缩放

• transform:scale(x,y)
• x,y=数字
• 一个参数，实现等比例缩放
• 修改宽高会影响其它的盒子
• 设置缩放的中心点

  transfrom-origin:x y

  （x,y=direction|value）(默认50% 50%)

20.4 综合写法

• transform:translate(…) rotate(…) origin(…)
• 执行是有顺序的
• 同时位移和其他属性时，建议将位移放在前面

21. CSS3动画

21.1 使用流程

• 定义动画
• 调用动画

21.2 定义动画

@keyframes name{0%{}...100%{}}/*from=0%,to=100%*/

21.3 调用动画

animation-name:name;animation-duration: ;...

21.4 动画属性

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

22. CSS3 3D转换

22.1 3D移动

• transform:translate3d(x,y,z)

  x,y,z方向移动

• transform:translateX(x)

  x方向移动

• transform:translateY(y)

  y方向移动

• transform:translateZ(z)

  z方向移动（一般是value）

• x,y,z是不能省略的

22.2 3D透视

• 透视写在被观察元素的父盒子上

• perspective:value

• 透视的value是眼睛到屏幕的距离，z是物体距离屏幕的距离

22.3 3D旋转

• transform:rotate3d(x,y,z,deg)

  自定义轴旋转(x,y,z以矢量的计算法则)

• transform:rotateX(deg)

• transform:rotateY(deg)

• transform:rotateZ(deg)

• 左手法则：大拇指超正方向，四指弯曲的方向为正旋转方向

22.4 3D呈现

• 控制子元素是否开启三维立体环境
• 不开启保持三维立体环境

  transform-style:flat

  (不开启的话，其它的兄弟级子盒子不保持3D立体空间)

• 开启保持三维立体环境

  transform-style:preserve-3d

23. 浏览器的私有前缀

• 为了兼容浏览器

• -moz-

  firefox

• -ms-

  IE

• -webkit-

  safari&chrome

• -o-

  opera

案例&案例中的知识点学习和总结

1. 简单导航

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>简单导航栏</title><style>div{background-color: aliceblue;height: 50px;width: 600px;margin: auto;text-align: center;}a{text-decoration: none;background-color: #DEB887;margin: auto;display: inline-block;height: 50px;width: 100px;text-align: center;color: white;line-height: 50px;}a:hover{background-color: #FBBC05;color: #000000;}</style></head><body><div><a href=\"#\">新闻</a><a href=\"#\">体育</a><a href=\"#\">娱乐</a><a href=\"#\">教育</a><a href=\"#\">美食</a></div></body></html>

2. 小盒子左侧对齐盒子

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>小盒子左侧的对其盒子</title><style>div{width: 100px;height: 50px;background-color: wheat;margin: auto;background-image: url(./点.png);background-size: 20IIpx;background-repeat: no-repeat;background-position: left center;}</style></head><body><div></div></body></html>

3. 新浪导航栏

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>新浪导航栏</title><style>div{border-top: #DEB887 solid 3px;border-bottom: #EA4335 solid 3px;display: inline-block;}a{display: inline-block;height: 50px;padding: 0 20px;text-align: center;line-height: 50px;text-decoration: none;font-size: 15px;}a:hover{background-color: #ccc;color: white;}</style></head><body><div id=\"nav\"><a href=\"#\">设为首页</a><a href=\"#\">手机新浪网</a><a href=\"#\">移动客户端</a><a href=\"#\">博客</a><a href=\"#\">微博</a><a href=\"#\">关注我</a></div></body></html>

4. 新闻列表

• 取消列表样式

  list-style: none;

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>新闻列表</title><style>*{margin: 0;padding: 0;}.big{width: 298px;height: 198px;border: 1px solid #ccc;margin: 100px auto;background-image: url(line.jpg);padding: 15px;}.big h2{font-size: 18px;padding: 5px 0;border-bottom: 1px solid #ccc;margin-bottom: 10px;}.big ul li{list-style: none;height: 30px;border-bottom: 1px dashed #ccc;background-image: url(arr.jpg);background-repeat: no-repeat;background-position: center left;}.big ul li a{color: #333;font-size: 15px;text-decoration: none;line-height: 30px;/* margin-left: 20px; *//* 没有宽度padding不会撑开盒子 */padding-left: 20px;}.big ul li:hover{background-color: #ccc;background-image: none;}</style></head><body><div class=\"big\"><h2 class=\"title\">最新文章/New Articles</h2><ul><li><a href=\"#\">前端工程师教程</a></li><li><a href=\"#\">Python教程</a></li><li><a href=\"#\">Java教程</a></li><li><a href=\"#\">PHP教程</a></li><li><a href=\"#\">C/C++教程</a></li></ul></div></body></html>

5. 小米案例(仿小米官网20-7-16内容，右侧盒子为图片,而且未设置动画效果)

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>小米案例</title><style>*{margin: 0;padding: 0;}.big{width: 1226px;height: 615px;background-color: #00FFFF;margin: auto;}.left{width: 234px;height: 615px;background-color: #0000FF;float: left;background-image: url(left.webp);background-size: 234px 615px;}.right{width: 992px;height: 615px;background-color: floralwhite;float: left;}.right li{width: 234px;height: 293.5px;list-style: none;margin-left: 14px;margin-bottom: 14px;float: left;background-repeat: no-repeat;background-image: url(1.png);background-size: 234px 293.5px;}</style></head><body><div class=\"big\"><div class=\"left\"></div><ul class=\"right\"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></body></html>

6. 上面有图片的导航栏

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>上面有图片的导航栏</title><style>*{margin: 0;padding: 0;}.banner{margin: auto;width: 612.8px;height: 60px;}.banner img{width: 612.8px;height: 60px;}.nav{margin: auto;width: 612.8px;height: 60px;background-color: #ccc;}.nav li{list-style: none;float: left;height: 60px;text-align: center;line-height: 60px;width: 122.56px;}.nav li a:hover{background-image: url(end.jpg);color: ghostwhite;}.nav li a{display: inline-block;text-decoration: none;color: orange;background-image: url(begin.jpg);height: 60px;width: 122.56px;}</style></head><body><div class=\"banner\"><img src=\"banner.webp\" /></div><ul class=\"nav\"><li><a href=\"#\">娱乐</a></li><li><a href=\"#\">游戏</a></li><li><a href=\"#\">学习</a></li><li><a href=\"#\">美食</a></li><li><a href=\"#\">宠物</a></li></ul></body></html>

7. 两侧的广告

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>两侧的广告</title><style>.left{position: fixed;background-color: #008000;top: 50px;width: 125px;height: 571px;background-size: 250px 571px;background-image: url(ea357761c1a951a3bc1c417012cabb47.jpg);}.right{position: fixed;background-color: #008000;top: 50px;right: 0;width: 125px;height: 571px;background-size: 250px 571px;background-image: url(ea357761c1a951a3bc1c417012cabb47.jpg);background-position: right;}.content{margin: auto;height: 2000px;width: 100px;background-color: #FBBC05;}</style></head><body><div class=\"left\"></div><div class=\"right\"></div><div class=\"content\"></div></body></html>

8. 哈根达斯案例

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>哈根达斯案例</title><style>*{margin: 0;padding: 0;}.box{margin: auto;width: 310px;height: 190px;}.box .adv{position: absolute;}.box .top{position: relative;}</style></head><body><div class=\"box\"><img class=\"adv\" src=\"adv.jpg\"/><img class=\"top\" src=\"top_tu.gif\"></div></body></html>

9. 土豆网

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>土豆网</title><style>.box{width: 310px;height: 190px;margin: 100px auto;}img{position: absolute;}.black{width: 310px;height: 190px;position: relative;}.black:hover{background-color: rgba(0,0,0,.3);background: url(arr.png) no-repeat center center;}</style></head><body><div class=\"box\"><a href=\"#\"><img src=\"../哈根达斯案例/adv.jpg\" /><div class=\"black\"></div></a></div></body></html>

10. 微信导航栏

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>微信导航栏</title><style>*{margin: 0;padding: 0;}body{background: url(wx.jpg) repeat-x;}.nav ul{margin-top: 20px;}.nav ul li{float: left;list-style: none;margin-left: 13px;/* display: inline-block; */}.nav ul li a{display: inline-block;height: 33px;padding-left: 15px;text-decoration: none;background: url(to.png) no-repeat;}.nav ul li a span{display: inline-block;padding-right: 15px;height: 33px;line-height: 33px;color: white;background: url(to.png) no-repeat right center;}.nav ul li a:hover,.nav ul li a span:hover{background-image: url(ao.png);}</style></head><body><div class=\"nav\"><ul><li><a href=\"#\"><span>首页</span></a></li><li><a href=\"#\"><span>帮助与反馈</span></a></li><li><a href=\"#\"><span>公众平台</span></a></li><li><a href=\"#\"><span>开放平台</span></a></li><li><a href=\"#\"><span>微信支付</span></a></li><li><a href=\"#\"><span>微信广告</span></a></li><li><a href=\"#\"><span>企业微信</span></a></li><li><a href=\"#\"><span>表情包开放平台</span></a></li><li><a href=\"#\"><span>微信网页版</span></a></li></ul></div></body></html>

11. 京东三角

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>京东三角</title><style>*{margin: 0;padding: 0;}.frist{width: 0;height: 0;border-style: solid;border-width: 40px;border-color: #0000FF #A52A2A #FBBC05 aqua;}.second{width: 0;height: 0;border-style: solid;border-width: 40px;border-color: transparent #A52A2A transparent transparent;}</style></head><body><div class=\"frist\"></div><div class=\"second\"></div></body></html>

12. 旋转生成三角形

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>旋转生成三角形</title><style>div{width: 200px;height: 50px;border: #ccc solid 1.5px;position: relative;}div::after{content: \"\";position: absolute;width: 10px;height: 10px;border-color: #ccc;border-width: 0 2px 2px 0;border-style: solid;right: 20px;top: 15px;transform: rotate(45deg);transition: all 0.2s;}div:hover::after{transform: rotate(225deg);}</style></head><body><div></div></body></html>

13. 旋转显示其它内容

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>旋转显示其它内容</title><style>div{margin: auto;margin-top: 200px;width: 100px;height: 100px;background-color: #F5DEB3;overflow: hidden;}div::before{content: \"\";display: inline-block;width: 100px;height: 100px;background-color: red;position: relative;transform-origin: left bottom;transform: rotate(90deg);transition: all 1s;}div:hover::before{transform: rotate(0deg);}</style></head><body><div></div></body></html>

14. 分页按钮

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>分页按钮</title><style type=\"text/css\">li{list-style: none;float: left;margin-right: 15px;border: #CCCCCC solid 1px;border-radius: 50%;width: 40px;height: 40px;font-size: 20px;line-height: 40px;text-align: center;cursor: pointer;transition: all 0.2s;}li:hover{transform: scale(1.2);color: #FBBC05;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>

15. 热点图

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>热点图</title></head><style type=\"text/css\">body{background-color: #333;}.map{width: 747px;height: 614px;background: url(map.png) no-repeat;margin: 0 auto;position: relative;}.city{position: absolute;top: 227px;right: 193px;}.dot{width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.city div[class^=\"pulse\"]{width: 8px;height: 8px;box-shadow: 0 0 12px #009dfd;position: absolute;top: 50%;left: 50%;border-radius: 50%;transform: translate(-50%,-50%);animation: pulse linear 1.2s infinite;}.pulse2{animation-delay: 0.4s !important;}.pulse2{animation-delay: 0.8s !important;}@keyframes pulse{from{}60%{width: 40px;height: 40px;opacity: 1;}to{width: 70px;height: 70px;opacity: 0;}}</style><body><div class=\"map\"><div class=\"city\"><div class=\"dot\"></div><div class=\"pulse1\"></div><div class=\"pulse2\"></div><div class=\"pulse3\"></div></div></div></body></html>

16. 奔跑的熊

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>奔跑的熊</title><style type=\"text/css\">body{background-color: #ccc;}div{position: absolute;width: 200px;height: 100px;background: url(bear.png);animation: bear 0.5s steps(8) infinite,move 3s forwards;}@keyframes bear{from{background-position: 0 0;}to{background-position: -1600px 0;}}@keyframes move{from{left: 0;}to{left: 50%;transform: translateX(-50%);}}</style></head><body><div></div></body></html>

17. 两面翻转的盒子

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>两面翻转的盒子</title><style type=\"text/css\">body{perspective: 2000px;}.box{position: relative;height: 300px;width: 300px;margin: 200px auto;transition: all 2s;transform-style: preserve-3d;}.front,.back{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;text-align: center;color: white;line-height: 300px;font-size: 50px;}.front{background-color: #FBBC05;}.back{transform: rotateY(180deg);background-color: darkgray;}.box:hover{transform: rotateY(180deg);}</style></head><body><div class=\"box\"><div class=\"front\">Hello</div><div class=\"back\">This is me</div></div></body></html>

18. 3D导航栏

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>3D导航栏</title><style type=\"text/css\">ul li{width: 120px;height: 40px;list-style: none;perspective: 500px;}.box{position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all 1s;}.box:hover{transform: rotateX(90deg);}.front,.bottom{position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;line-height: 40px;color: ghostwhite;}.front{background-color: #F5DEB3;z-index: 1;transform: translateZ(20px);}.bottom{background-color: darkgoldenrod;transform: translateY(20px) rotateX(-90deg);}</style></head><body><ul><li><div class=\"box\"><div class=\"front\">翻翻看</div><div class=\"bottom\">首页</div></div></li></ul></body></html>

19. 旋转木马

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>旋转木马</title><style type=\"text/css\">body{perspective: 5000px;}section{width: 432px;height: 432px;margin: 100px auto;position: relative;transform-style: preserve-3d;animation: rotate 7s linear infinite;background-image: url(pic.jpg);}section:hover{animation-play-state: paused;}section div{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url(pika.jpg) no-repeat;}section div:nth-child(1){transform: translateZ(600px);}section div:nth-child(2){transform: rotateY(60deg) translateZ(600px);}section div:nth-child(3){transform: rotateY(120deg) translateZ(600px);}section div:nth-child(4){transform: rotateY(180deg) translateZ(600px);}section div:nth-child(5){transform: rotateY(240deg) translateZ(600px);}section div:nth-child(6){transform: rotateY(300deg) translateZ(600px);}@keyframes rotate{from{transform: rotateY(0);}to{transform: rotateY(360deg);}}</style></head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section></body></html>

100%;
text-align: center;
line-height: 40px;
color: ghostwhite;
}
.front{
background-color: #F5DEB3;
z-index: 1;
transform: translateZ(20px);
}
.bottom{
background-color: darkgoldenrod;
transform: translateY(20px) rotateX(-90deg);
}

• 翻翻看
  首页

“`

19. 旋转木马

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>旋转木马</title><style type=\"text/css\">body{perspective: 5000px;}section{width: 432px;height: 432px;margin: 100px auto;position: relative;transform-style: preserve-3d;animation: rotate 7s linear infinite;background-image: url(pic.jpg);}section:hover{animation-play-state: paused;}section div{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url(pika.jpg) no-repeat;}section div:nth-child(1){transform: translateZ(600px);}section div:nth-child(2){transform: rotateY(60deg) translateZ(600px);}section div:nth-child(3){transform: rotateY(120deg) translateZ(600px);}section div:nth-child(4){transform: rotateY(180deg) translateZ(600px);}section div:nth-child(5){transform: rotateY(240deg) translateZ(600px);}section div:nth-child(6){transform: rotateY(300deg) translateZ(600px);}@keyframes rotate{from{transform: rotateY(0);}to{transform: rotateY(360deg);}}</style></head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section></body></html>