CSS3-选择器、2D转换，动画，3D转换，浏览器私有前缀

主要内容：

CSS3 属性选择器
CSS3 结构伪类选择器
CSS3 伪元素选择器
CSS3 2D转换
CSS3 动画
CSS3 3D转换
浏览器私有前缀

一、现状

浏览器支持程度差，需要添加私有前缀

二、 CSS3 属性选择器

类选择器、属性选择器、伪类选择器，权重为 10
代码演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

三、CSS3 结构伪类选择器

1、属性说明

代码演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

2、nth-child参数说明

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

代码演示

<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

3、`nth-child` 和 `nt-of-type` 的区别

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

代码演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

4、总结

结构伪类选择器就是选择第n个
Nth-child从所有子级开始算的，可能不是同一种类型
Nth-of-type 是指定同一种类型的子级，比如 ul li:nth-of-type(2) 是选择第2个li
关于nth-child（n）我们要知道n从0开始计算的，要记住常用的公式
如果是无无序列表，我们肯定用 nth-child 更多
类选择器、属性选择器、伪类选择器，权重为 10

四、伪元素选择器

1、伪元素选择器

before 和 after 必须有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1

代码演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

2、CSS选择器及权重复习

内联样式 1000
ID选择器 100
类选择权，属性选择器，伪类选择器 10
标签选择器，伪元素选择器 1

3、清楚浮动的办法

父元素添加 overfloat:hidden
- 优点：代码简洁
- 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
使用::after伪元素清除浮动
- 优点：符合闭合浮动思想，结构语义化正确
- 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

.box::after{
    content:"";
    display:block;
    clear:both;
    visibility:hidden;
}

<div class=box>
    <div class\="big"\>big</div\>
    <div class\="small"\>small</div\>
    <!--<div class="clear">额外标签法</div>-->
</div>

zoom:1 : ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行,一般与其他组合使用

.box{
    *zoom:1;

}

使用before和after双伪元素清除浮动

.box:after,.box:before{
        content: "";
        display: table;
    }
.box:after{
        clear: both;
    }
.box{
     *zoom: 1;
    }

五、CSS 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

缩放：scale
移动：translate
旋转：rotate
倾斜：skew

1、2D 移动 translate

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

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

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

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

2、2D 转换之旋转 rotate

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

transform:rotate(angle)

rotate 里面跟度数，单位是 deg
角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点
设置旋转中心点:transform-origin: x y;//(left,right,top,bottom,center)

img:hover {
  transform: rotate(360deg)
}

3、2D 转换之缩放scale

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

transform:scale(x,y);

transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小

4、顺序

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

六、CSS动画

1. 什么是动画


*   动画是 `CSS3` 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

2. 动画的基本使用


*   先定义动画
*   在调用定义好的动画

3. 语法格式(定义动画)

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

4.语法格式(使用动画)

   div {  
    /\* 调用动画 \*/  
    animation-name: 动画名称;  
    /\* 持续时间 \*/  
    animation-duration: 持续时间；  
   }

5. 动画序列


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

6. 代码演示

    <style\>  
     div {  
     width: 100px;  
     height: 100px;  
     background-color: aquamarine;  
     animation-name: move;  
     animation-duration: 0.5s;  
     }  
      
     @keyframes move{  
     0% {  
     transform: translate(0px)  
     }  
     100% {  
     transform: translate(500px, 0)  
     }  
     }  
     </style\>

7. 常见的属性

8. 代码演示

    div {  
     width: 100px;  
     height: 100px;  
     background-color: aquamarine;  
     /\* 动画名称 \*/  
     animation-name: move;  
     /\* 动画花费时长 \*/  
     animation-duration: 2s;  
     /\* 动画速度曲线 \*/  
     animation-timing-function: ease-in-out;  
     /\* 动画等待多长时间执行 \*/  
     animation-delay: 2s;  
     /\* 规定动画播放次数 infinite: 无限循环 \*/  
     animation-iteration-count: infinite;  
     /\* 是否逆行播放 \*/  
     animation-direction: alternate;  
     /\* 动画结束之后的状态 \*/  
     animation-fill-mode: forwards;  
    }  
      
    div:hover {  
     /\* 规定动画是否暂停或者播放 \*/  
     animation-play-state: paused;  
    }

9. 动画简写方式

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

10. 知识要点

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

    animation: move 2s linear 1s infinite alternate forwards;

11. 速度曲线细节

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

六、CSS 3D转换

1、 `3D` 转换特点

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

2. 三维坐标系

x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值
y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值
z 轴：垂直屏幕 -- **注意：往外边的是正值，往里面的是负值

3、`3D` 转换

（1）`3D` 转换知识要点

3D 位移：translate3d(x, y, z)
3D 旋转：rotate3d(x, y, z)
透视：perspctive
3D呈现 transfrom-style

（2） `3D` 移动 `translate3d`

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
- 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

（3）. 语法

    transform: translate3d(x, y, z)

(4). 代码演示

    transform: translate3d(100px, 100px, 100px)  
    /\* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 \*/  
    transform: translate3d(100px, 100px, 0)

2、透视 `perspective`

(1)讲解

如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
实际上模仿人类的视觉位置，可视为安排一直眼睛去看
透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

(2) 要点

透视需要写在被视察元素的父盒子上面
注意下方图片
- d：就是视距，视距就是指人的眼睛到屏幕的距离
- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

(3) 代码演示

    body {  
     perspective: 1000px;  
    }

3、 `translateZ`

(1) `translateZ` 与 `perspecitve` 的区别

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

4、`3D` 旋转`rotateX`

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

（1）语法

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

    div {  
     perspective: 300px;  
    }  
      
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
      
    img:hover {  
     transform: rotateX(\-45deg)  
    }

(2) 左手准则

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

4、`3D` 旋转 `rotateY`

    div {  
     perspective: 500px;  
    }  
      
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
      
    img:hover {  
     transform: rotateY(180deg)  
    }

左手准则
- 左手的拇指指向 y 轴的正方向
- 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

5、 `3D` 旋转 `rotateZ`

    div {  
     perspective: 500px;  
    }  
      
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
      
    img:hover {  
     transform: rotateZ(180deg)  
    }

（1） `rotate3d`

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
- transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
- transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

    div {  
     perspective: 500px;  
    }  
      
    img {  
     display: block;  
     margin: 100px auto;  
     transition: all 1s;  
    }  
      
    img:hover {  
     transform: rotate3d(1, 1, 0, 180deg)  
    }

6、`3D` 呈现 `transform-style`

transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat 代表子元素不开启 3D 立体空间，默认的
- transform-style: preserve-3d 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子

7、浏览器私有前缀

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

私有前缀
- -moz-：代表 firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表 safari、chrome 私有属性
- -o-：代表 Opera 私有属性
提倡的写法

\-moz-border-radius: 10px;
\-webkit-border-radius: 10px;
\-o-border-radius: 10px;
border-radius: 10px;

CSS3-选择器、2D转换，动画，3D转换，浏览器私有前缀

一、现状

二、 CSS3 属性选择器

三、CSS3 结构伪类选择器

1、属性说明

2、nth-child参数说明

3、nth-child 和 nt-of-type 的区别

4、总结

四、伪元素选择器

1、伪元素选择器

2、CSS选择器及权重复习

3、清楚浮动的办法

五、CSS 2D转换

1、2D 移动 translate

2、2D 转换之旋转 rotate

3、2D 转换之缩放scale

4、顺序

六、CSS动画

1. 什么是动画

2. 动画的基本使用

3. 语法格式(定义动画)

4.语法格式(使用动画)

5. 动画序列

6. 代码演示

7. 常见的属性

8. 代码演示

9. 动画简写方式

10. 知识要点

11. 速度曲线细节

六、CSS 3D转换

1、 3D 转换特点

2. 三维坐标系

3、3D 转换

（1）3D 转换知识要点

（2） 3D 移动 translate3d

（3）. 语法

(4). 代码演示

2、透视 perspective

(1)讲解

(2) 要点

(3) 代码演示

3、 translateZ

(1) translateZ 与 perspecitve 的区别

4、3D 旋转rotateX

（1） 语法

(2) 左手准则

4、3D 旋转 rotateY

5、 3D 旋转 rotateZ

（1） rotate3d

6、3D 呈现 transform-style

7、浏览器私有前缀

LUYrty樱花

引用和评论

Node.js 1 --- 基础学习

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号

3、`nth-child` 和 `nt-of-type` 的区别

1、 `3D` 转换特点

3、`3D` 转换

（1）`3D` 转换知识要点

（2） `3D` 移动 `translate3d`

2、透视 `perspective`

3、 `translateZ`

(1) `translateZ` 与 `perspecitve` 的区别

4、`3D` 旋转`rotateX`

（1）语法

4、`3D` 旋转 `rotateY`

5、 `3D` 旋转 `rotateZ`

（1） `rotate3d`

6、`3D` 呈现 `transform-style`