CSS3新特性| 5n | 5，10，15..... | | -n+5 | 前五个，5，4，3，2，1，0.......

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

新增选择器

新增子集选择器

带有特定父元素的元素，如果子元素不是父元素的，则不会被选中，必须满足父子级关系，可以缩小范围

书写方法：父选择器 > 子选择器{ }

<style>
/* 只能选中三个p，box2内的p无法选中 */
.box1 > p {
    color: red;
}
</style>
</head>
<body>
<div class="box1">
  <p>我可以选中</p>
  <p>我可以选中</p>
  <p>我可以选中</p>
  <div class="box2">
      <p>我不能被选中</p>
  </div>
</div>

新增兄弟选择器

选中自己的兄弟元素，必须有同一个父亲

偏移方向：

选择器1 + 选择器2 { }（选中紧跟在选择器1后面的选择器2的元素，只能选中一个元素）
选择器1 ~ 选择器2 { }（选中选择器1后面的所有选择器2的元素，可选中多个）

<style>
  /* 只能选中一个元素box1的第二个p标签 */
  .box1 .son1 + p {
      color: red;
  }
  /* 可以选中所有box2的后三个孩子 */
  .box2 .ch1 ~ p {
      color: green;
  }
</style>


<div class="box1">
  <p class="son1">我是box1的第1个孩子</p>
  <!-- <div>如果我存在，我后面的p就无法选中了</div> -->
  <p class="son2">我是box1的第2个孩子</p>
  <p class="son2">我是box1的第3个孩子</p>
</div>
<div class="box2">
  <p class="ch1">我是box2的第1个孩子</p>
  <p class="ch2">我是box2的第2个孩子</p>
  <p class="ch3">我是box2的第3个孩子</p>
  <p class="ch4">我是box2的第4个孩子</p>
</div>

注意：选择器1 + 选择器2 { }写法如果中间有其他元素就会失效

结构伪类选择器

选择器	简介
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个

注意：一般E可以不写，因为如果要是写E的话就要满足：前后两个条件都成立才能生效

nth-child(n}：n可以是数字、关键字（常见even奇数，odd偶数）、公式（从0开始计算，n是递增的1，2，3，4.....直到最后）

公式	效果
2n	偶数
2n+1	奇数
5n	5，10，15.....
n+5	从第五个开始到最后
-n+5	前五个，5，4，3，2，1，0........

E:nth-child(n）和E:nth-of-type(n)的区别：

E:nth-child(n）选中的是父元素的第n个子元素，同时需要满足E和nth-child(n）两个条件
E:nth-of-type(n)匹配的是父元素下的所有E元素，会忽略非同类型的元素

<style>
    /* 最后一个子元素 */
    .box1 :last-child {
        color: green;
    }
    /* 第一个子元素 */
    .box1 :first-child {
        color: red;
    }
    /* 第三个子元素 */
    .box1 :nth-child(3) {
        color: yellow;
    }
    /* 前五个子元素 */
    .box1 :nth-child(-n + 5) {
        background: #cccccc;
    }
    /* 选中box2中第一个h3 */
    .box2 h3:first-of-type {
        color: tomato;
    }
    /* 选中box2中最后一个h3*/
    .box2 h3:last-of-type {
        color: skyblue;
    }
    /* 选中box2中第三个p */
    .box2 p:nth-of-type(3) {
        background: #ccc;
    }
</style>



<div class="box1">
    <p>我是第1个p元素</p>
    <p>我是第2个p元素</p>
    <p>我是第3个p元素</p>
    <p>我是第4个p元素</p>
    <p>我是第5个p元素</p>
    <p>我是第6个p元素</p>
    <p>我是第7个p元素</p>
    <p>我是第8个p元素</p>
</div>
<div class="box2">
    <h3>我是文本</h3>
    <p>我是文本</p>
    <h3>我是文本</h3>
    <p>我是文本</p>
    <p>我是文本</p>
    <p>我是文本</p>
</div>

新增伪元素选择器

给元素添加伪元素

书写方法：选择器::伪元素{ }

选择器	介绍
E::before	在E元素内部的前面插入一个元素
E::after	在E元素内部的后面插入一个元素
E::first-letter	选择到了E容器内的第一个字母
E::first-line	选择到了E容器内的第一行文本

h5和传统写法区别：

单冒号和双冒号（H5）
伪元素：前不能有空格
伪元素内部必须有content属性才能显示出来
创建的伪元素属于行内元素
在dom里面看不到创建的元素，所以称为伪（伪造）元素

<style>
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  /* 选中p1前面 */
  .box1 .p1::before {
      content: "before";
      color: red;
  }
  /* 选中p1后面 */
  .box1 .p1::after {
      content: "after";
      color: red;
  }
  /* 可以使用其他选择器，选中p2第一个字 */
  .box1 :last-child::first-letter {
      color: red;
  }
  /* 选中p2第一行 */
  .box1 :last-child::first-line {
      background: #cccccc;
  }
</style>


<div class="box1">
  <p class="p1">我是文字</p>
  <p class="p2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
</div>

属性选择器

选中包含指定属性的标签

选择器	简介
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>
  /* 只会选中有id属性的p元素 */
  p[id] {
      color: red;
  }
  /* 只会选中有class属性并且属性值为son2的p元素 */
  p[class="son2"]{
      color: green;
  }
  /* 只会选中有class属性并且属性值为ch开头的p元素 */
  p[class^="ch"] {
      color: pink;
  }
  /* 只会选中有class属性并且属性值为2结尾的p元素 */
  p[class$="2"] {
      background: #cccccc;
  }
  /* 只会选中有class属性并且属性值包含y的p元素  并且可以和其他选择器混用哦 */
  .box1 p[class*="y"] {
      font-size: 40px;
  }
</style>



<div class="box1">
  <p class="son1" id="id1">我是第1行</p>
  <p class="son2">我是第2行</p>
  <p class="chd1">我是第3行</p>
  <p class="chd2">我是第4行</p>
  <p class="my1">我是第5行</p>
  <p class="my2">我是第6行</p>
  <p class="you1">我是第7行</p>
  <p class="you2">我是第8行</p>
</div>

选择器权重

伪类选择器、属性选择器的权重===类选择器
伪元素选择器权重===标签选择器

CSS3盒模型

box-sizing（盒模型）

可以设置如何计算一个元素的总宽度和高度

书写方法：box-sizing: 属性值

属性值	说明
cotent-box	默认值，标准的盒子，盒模型是外扩的，盒子的宽高只包含内容区域，如果要绘制padding和border不会影响内容区域
border-box	怪异盒模型，盒模型是内减的，设置的宽高包括了内容区域+padding+border，如果padding或者border变化，内容区域也跟着变化

<style>
    /* 很摸摸你先可以看到两者总体宽高不一样 */
    .box1 {
        float: left;
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 10px solid red;
    }
    .box2 {
        /* 设置box2为怪异盒模型 */
        float: left;
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 10px solid blue;
    }
</style>


<div class="box1">
    我和box2的width、height一样
</div>
<div class="box2">
    我和box1的width、height一样
</div>

CSS3新增属性

边框圆角（border-radius）

设置边框的圆角效果，百分比属性值参考盒子的整体宽高（包含padding）

书写方法：border-radius：属性值（px/%）

属性值	说明
x-radius/y-radius	/分割两部分属性值，前面为水平半径，后面为垂直半径，得到椭角形
radius	一个值，水平垂直设置为同一个值

单一属性值：

border-top-left-radius（左上角）
border-top-right-radius（右上角）
border-bottom-left-radius（左下角）
border-bottom-right-radius（右下角）

4种简写方法：

四值法：左上、右上、右下、左下（顺时针）
三值法：左上、右上和右下、左下
二值法：左上和右下、右上和左下
一值法：四个角相同

/属性值写法：

如果出现 / ，那么斜线前面代表水平方向，后面代表垂直方向，就要从水平和垂直方向分别看

<style>
    /* 很明显你可以看到两者总体宽高不一样 */
    .box1 {
        float: left;
        width: 200px;
        height: 200px;
        padding: 10px;
        background: #ccc;
        /* 四个角分别是顺时针10px，20px，30px，40px */
        border-radius: 10px 20px 30px 40px;
    }

    .box2 {
        float: left;
        width: 200px;
        height: 200px;
        padding: 10px;
        margin-left: 20px;
        /* 顺时针四个角x和y分别是40/50、20/80、30/40、40/80 */
        border-radius: 40px 20px 30px 40px/ 50px 80px 40px;
        background-color: pink;
    }

    .box3 {
        float: left;
        width: 200px;
        height: 200px;
        padding: 10px;
        margin-left: 20px;
        /* 因为padding+height=220，取一半110可以制造原型效果 */
        border-radius: 110px;
        /* border-radius: 50%;   和上面效果等价，工作中一般写这个*/
        background-color: skyblue;
    }
</style>



<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>

兼容问题：IE8或者以下的浏览器不支持border-radius属性，其他浏览器都支持

文字阴影（text-shadow）

可以向文本添加阴影效果，根据属性值可以规定水平、垂直、模糊距离和阴影颜色

书写方法：text-shadow：水平垂直模糊颜色

属性值	说明
h-shadow	必填，水平阴影位置，允许负值
v-shadow	必填，垂直阴影位置，允许负值
blur	可选，模糊距离
color	可选，阴影颜色

关于方向：

h-shadow如果是正值，右侧出现阴影，负值左侧出现阴影
v-shadow如果是正值，下方出现阴影，负值上方出现阴影

多层阴影：逗号分隔多层阴影属性值，先写的压盖后写的阴影值

<style>
  .p1 {
      text-shadow: 5px 10px 10px #F00;
  }
  /* 多层阴影 */
  .p2 {
      text-shadow: 5px 10px 10px #F00,
      3px 3px 5px green,
      5px 20px 10px yellow;
  }
</style>

<p class="p1">我要设置阴影</p>
<p class="p2">我要设置多层阴影</p>

盒子阴影（box-shadow）

给盒子添加阴影

书写方法：box-shadow：水平垂直模糊阴影尺寸颜色内外

属性值	说明
h-shadow	必填，水平阴影位置，允许负值
v-shadow	必填，垂直阴影位置，允许负值
blur	可选，模糊距离
color	可选，阴影颜色（默认黑色）
spread	可选，阴影扩展尺寸，向四周扩大
inset	可选，设置为内部阴影，默认外部阴影

多层阴影：和文字阴影相同

<style>
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
      /* 阴影 */
      box-shadow: 20px 20px 5px 5px #ccc;
      background: pink;
  }
  .box2 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
      margin-top: 20px;
      /* 多层阴影 */
      box-shadow: 20px 20px 5px  #00f, 30px 30px 5px #0f0;
      background: pink;
  }
</style>


<div class="box1"></div>
<div class="box2">我要设置多层阴影</div>

CSS3动画效果（过渡属性）

CSS3之前，前端一般使用flash或者js制作

帧动画：通过一帧一帧的画面按照一定规律播放实现，如胶片电影

过渡属性（transition）

在不使用flash和js的情况下，使用transition可以实现补间动画效果（过渡效果），当元素属性发生变化时，会出现a和b两种状态，那么css3就会在这两种状态之间进行平滑过渡

书写方法： transition：过渡的属性过渡时间运动曲线延时时间

属性	说明
transition	简写属性，合并下面四中写法
transition-property	应用过渡CSS属性的名称
transition-duration	过渡时间，默认为0
transition-timing-function	过渡（速度）效果曲线，默认为ease
transition-delay	过渡效果从何时开始，默认为0，恢复的时间也同样

transition-property属性值：

none表示没有属性进行过渡
all表示所有变化的属性都过渡
属性名，使用具体属性名，多个属性名中间用逗号分隔

时间：

过渡时间：以秒为单位
延时时间：以秒为单位，0s也必须加单位

transition-timing-function属性：

值	说明
linear	匀速
ease	慢速开始然后加快，慢速结束
ease-in	慢速开始
ease-out	慢速结束
ease-in-out	慢速开始，慢速结束
cubic-bezier（x1,y1,x2,y2）	自定义，x取值0-1之间，y任意值，四个数值表示拉扯点的两个坐标（贝塞尔曲线）（可以在控制台中调试或者更改）

<style>
  .box1 {
      width: 100px;
      height: 100px;
      border: 5px solid red;
      background: pink;
      /* 过渡效果 所有变化的 过渡时间2s 贝塞尔曲线 2s触发 tongyang 2s之后才能恢复*/
      transition: all 2s cubic-bezier(0.87,-0.21, 0, 1.43) 2s;
      /* 一般会加上下面兼容写法 */
      -webkit-transition: all 2s cubic-bezier(0.87,-0.21, 0, 1.43) 2s;
  }
  .box1:hover {
      width: 200px;
      height: 200px;
  }
</style>


<div class="box1"></div>

兼容性问题：IE9或者更早的版本不支持，safair需要加前缀-webkit-

2D转换（transform）

对元素进行移动、缩放、转动、拉伸、拉长等效果，配合过渡属性，可以代替需要大量代码的flash效果

书写方法：transform：属性值

位移（translate）

书写方法：translate（x,y），数值相对于自身宽高

值	说明
translate（x，y）	x和y代表水平和垂直方向位移距离，可以是px或者百分比%，区分正负
translate（x）	只有一个数值，代表水平方向位移

关于方向：

x正值向右移动，负值想左移动
y正值向下移动，负值向上移动

<style>
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box1 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 水平垂直都移动100px */
      transform: translate(100px,100px);
  }
  .box2 {
      position: relative;
      width: 500px;
      height: 500px;
      border: 5px solid red;
  }
  .box2 .son {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      /* 可以使用translate来代替以前水平垂直居中的margin */
      transform: translate(-50%, -50%);
      background: #cccccc;

  }
</style>


<div class="box1">
  <div class="son"></div>
</div>
<div class="box2">
  <div class="son"></div>
</div>

缩放（scale）

书写方法：scale（），默认基于中心点进行缩放

值	说明
scale（x，y）	x和y分别代表改变宽高的倍数
scale（n）	只有一个值，宽高同时缩放n倍
scaleX（n）	缩放宽度
scaleY（n）	缩放高度

<style>
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box1 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 水平缩小到0.5，垂直缩小到0.7 */
      transform: scale(0.5, 0.7);
  }
  .box2 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box2 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 只将水平方向缩放到1，2倍 */
      transform: scaleX(1.2);
  }

</style>


<div class="box1">
  <div class="son"></div>
</div>
<div class="box2">
  <div class="son"></div>
</div>

旋转（rotate）

书写方法：rotate（数字deg）

关于方向：正数代表顺时针，负数代表逆时针，只有一个属性

<style>
  /* 可以看到两者效果不同，因为旋转和位移对元素坐标轴发生了变化 */
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box1 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 旋转45度  X轴位移29px */
      transform: rotate(45deg) translate(29px);
  }
  .box2 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box2 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* X轴位移29px 旋转45度 */
      transform: translate(29px) rotate(45deg);
  }

</style>


<div class="box1">
  <div class="son"></div>
</div>
<div class="box2">
  <div class="son"></div>
</div>

注意：元素旋转后，坐标轴也会发生变化，因此，多个属性值给transfrom时，书写顺序的不同可能导致效果不同

倾斜（skew）

实现元素的倾斜

书写方法：skew：（数字deg，数字deg）

两个属性值，代表水平和垂直方向倾斜的角度，可正可负，第二个值不写默认为0

<style>
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box1 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 向右倾斜30度 */
      transform: skew(30deg);
  }
  .box2 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box2 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 向上倾斜30度 */
      transform: skew(0, -30deg);
  }

</style>


<div class="box1">
  <div class="son"></div>
</div>
<div class="box2">
  <div class="son"></div>
</div>

基准点（transform-origin）

默认的基准点是元素中心，可以更改

书写方法：transform-origin：x y

值	说明
x	定义X轴原点在何处，可选：left、center、right、px、%
y	定义Y轴原点在何处，可选：top、center、bottom、px、%

<style>
  .box1 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box1 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 左上角为原点，顺时针旋转30度 */
      transform-origin: left top;
      transform: rotate(30deg);
  }
  .box2 {
      width: 200px;
      height: 200px;
      border: 5px solid red;
  }
  .box2 .son {
      width: 200px;
      height: 200px;
      background: #cccccc;
      /* 左右下为原点，逆时针旋转30度 */
      transform-origin: right bottom;
      transform: rotate(-30deg);
  }

</style>


<div class="box1">
  <div class="son"></div>
</div>
<div class="box2">
  <div class="son"></div>
</div>

卡包案例

需求：制作一个旋转的卡包效果，鼠标移上展开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 父盒子属性 */
        .box1 {
            position: relative;
            width: 260px;
            height: 185px;
            margin: 350px auto;
            border: 1px solid #333;
        }
        /* 内部img属性，绝对定位，重叠在左上角，和父亲同宽高，基准点右上角，设置过过渡果 */
        .box1 img {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top right;
            transition: all 2s ease;
        }
        /* 下面6个img图片设置不同的旋转角度 */
        .box1:hover :nth-child(1) {
            transform: rotate(60deg);
        }
        .box1:hover :nth-child(2) {
            transform: rotate(120deg);
        }
        .box1:hover :nth-child(3) {
            transform: rotate(180deg);
        }
        .box1:hover :nth-child(4) {
            transform: rotate(240deg);
        }
        .box1:hover :nth-child(5) {
            transform: rotate(300deg);
        }
        .box1:hover :nth-child(6) {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <!-- 父盒子 -->
    <div class="box1">
        <!-- 6个图片（卡位） -->
        <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
        <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
        <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
        <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
        <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
        <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
    </div>
</body>

</html>

3D转换

transfrom属性可以进行3D转换，可以实现3D立体效果会多添加一条Z轴

电脑显示的是一个2D平面，图像之所有立体感，其实是一种视觉呈现，通过透视可以达成，在一个2D平面中，呈现一中3D效果

特点：近大远小

注意：并非所有情况下都需要透视效果，根据开发进行设置，如果Z轴需要变化，可以使用透视效果

透视（perspective）

设置在Z轴的视线焦点的观察位置，从而实现3D效果，这条属性书写在元素的父元素上面

书写方法：perspective：属性值（px）

<style>
  .box1 {
      width: 200px;
      height: 150px;
      border: 1px solid #333;
      margin: 200px auto;
      /* 父元素添加透视属性 */
      perspective: 1000px;
  }
  .box1 img {
      width: 200px;
      height: 150px;
      /* 过渡效果 */
      transition: all 1s ease;
  }
  .box1 img:hover {
      /* 沿着X轴旋转顺时针50度 */
      transform: rotateX(50deg);
  }
</style>


<div class="box1">
  <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
</div>

3D旋转（rotate）

沿着指定的轴线进行旋转

书写方法：rotateX/Y/Z（属性值）

值	说明
rotateX（angle）	沿着X轴进行3D旋转
rotateY（angle）	沿着Y轴进行3D旋转
rotateZ（angle）	沿着Z轴进行3D旋转

方向问题：数值为正，顺时针旋转，为负，逆时针旋转

X轴右侧为观察点
Y轴下侧为观察点
Z轴人眼为观察点，类似于前面的2D旋转

<style>
  .box1 {
      width: 200px;
      height: 150px;
      border: 1px solid #333;
      margin: 200px auto;
      /* 父元素添加透视属性 */
      perspective: 1000px;
  }
  .box1 img {
      width: 200px;
      height: 150px;
      /* 过渡效果 */
      transition: all 1s ease;
  }
  .box1 img:hover {
      /* 沿着X轴旋转顺时针50度 */
      transform: rotateX(50deg);
  }
</style>


<div class="box1">
  <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
</div>

3D位移（translate）

和3D旋转类似，3D位移也分为3个方向

书写方法：translateX/Y/Z（属性值px/%）

值	说明
translateX（x）	X轴方向位移值
translateX（y）	Y轴方向位移值
translateX（z）	定义3D位移，Z轴方向位移值

方向问题：区分正负

X正值向右移动，负值向左移动
Y正值向下移动，负值向上移动
Z正值向屏幕外移动，负值向屏幕内运动（类似于缩放效果）

<style>
  .box1,.box2 {
      width: 200px;
      height: 150px;
      border: 1px solid #333;
      margin: 200px auto;
      /* 父元素添加透视属性 */
      perspective: 1000px;
  }
  .box1 img {
      width: 200px;
      height: 150px;
      /* 过渡效果 */
      transition: all 1s ease;
  }
  .box1 img:hover {
      /* 3D旋转可以同时存在哦 */
      transform: rotateX(50deg) rotateY(50deg);
  }
  .box2 img {
      width: 200px;
      height: 150px;
      /* 过渡效果 */
      transition: all 1s ease;
  }
  .box2 img:hover {
      /* 先沿着Y轴旋转50度，再沿着X轴平移100px */
      transform: rotateY(50deg) translate(100px);
  }
</style>


<div class="box1">
  <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
</div>
<div class="box2">
  <img src="https://s1.ax1x.com/2020/10/28/B3kkHx.jpg" alt="">
</div>

注意：和2D一样，旋转和位移会改变轴线，书写方式不同也会影响效果

子元素3D坐标轴展示新属性（transform-style）

设置子元素在父元素3D空间中显示，子元素保留自己的3D转换坐标轴

书写方法：父元素{transform-style：属性 }

属性值	说明
flat	默认值，2D呈现
preserve-3D	保留3D 空间

teansform浏览器兼容问题：

谷歌浏览器和safiar需要添加-webkit-前缀
IE9需要添加-ms-前缀

案例---正方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
    <style>
        /* 清除样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 父盒子属性 */
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            margin: 200px auto;  
        }
        /* box2是运动的舞台 设置定位  过渡动画  3D渲染展示  透视效果 */
        .box1 .box2 {
            position: relative;
            /* 一定要设置宽高，否则内部元素全部定位了就没有宽高了 */
            width: 200px;
            height: 200px;
            transition: all 5s ease;
            transform-style: preserve-3d;
            perspective: 5000px;
        }
        /* 设置box2鼠标移入 */
        .box1 .box2:hover {
            transform: rotateX(360deg) rotateY(360deg);
            /* 兼容写法 兼容谷歌和苹果 */
            -webkit-transform: rotateX(360deg) rotateY(360deg);
        }
        /* 盒子6个面设置定位 */
        .box1 .box2  p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
        }
        /* 6个面分别设置颜色 3D空间定位 */
        .box1 .box2 p:nth-child(1) {
            background: rgba(255,182,193,0.3);
            transform: translateZ(100px);
        }
        .box1 .box2 p:nth-child(2) {
            background: rgba(139,0,139,0.3);
            transform: rotateX(90deg)  translateZ(100px);
        }
        .box1 .box2 p:nth-child(3) {
            background:rgba(65,105,225,0.3);
            transform: rotateY(180deg)  translateZ(100px);
        }
        .box1 .box2 p:nth-child(4) {
            background: rgba(64,224,208,0.3);
            transform: rotateX(-90deg)  translateZ(100px);
        }
        .box1 .box2 p:nth-child(5) {
            background:rgba(255,250,205,0.3);
            transform: rotateY(90deg)  translateZ(100px);
        }
        .box1 .box2 p:nth-child(6) {
            background:rgba(255,127,80,0.3);
            transform: rotateY(-90deg)  translateZ(100px);
        }
    </style>
</head>
<body>
    <!-- 大盒子 -->
    <div class="box1">
        <!-- 舞台 -->
        <div class="box2">
            <!-- 6个面 -->
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
        </div>
    </div>
</body>

</html>

动画

CSS3中提供了自己制作动画的方法，这可以多页面中替代动画图片、flash以及js

制作步骤：创建动画、引用动画

@keyframes规则

用于创建动画

@keyframes中规定某项CSS样式，就能创建由一个样式逐渐变成另一个样式的效果，可以在内部写多个样式和次数
使用百分比规定发生变化的时间，或者关键词from（开始）、to（结束），0为动画开始，100%为动画完成

书写方法：@keyframes 动画名称{ from{}，............. to{} }

animation属性

将某个动画绑定到选择器，否则无法使用动画，

书写方法：选择器 {animation：动画名称（必填）过渡时间（必填）速度曲线动画次数延迟时间 }

属性	描述
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是0。
animation-timing-function	规定动画的速度曲线。默认是"ease".
animation-delay	规定动画何时开始。默认是0。
animation-iteratign-count	规定动画被播放的次数。默认是1。infinite表示无限次播放。

<style>
  * {
      padding: 0;
      margin: 0;
  }
  .box1 {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 200px auto;
      background-color: skyblue;
      /* 引入动画绑定 */
      animation: one 2s linear infinite;
  }
  /* 定义动画 */
  @keyframes one {
      from {
          transform: translateX(0);
      }
      25% {
          transform: translateX(100px);
      }
      50% {
          transform: translateX(0);
      }
      75% {
          transform: translateX(-100px);
      }
      to {
          transform: translateX(0);
      }
  }
</style>


<div class="box1"></div>

兼容性：

Internet Explorer 10、Firefox 以及Opera支持@keyframes规则和animation属性。
Chrome和Safari需要前缀-webkit-。
Internet Explorer9,以及更早的版本，不支持@keyframe规则或animation属性。