CSS3学习_will-change: transform;浏览器版本

CSS3选择器

基本选择器

子元素选择器

1、概念：只能选择某元素的子元素
2、语法格式：父元素>子元素 (father>children) – 只能是儿子，孙子辈以下都不可以
3、兼容性：Ie8+、firefox、chrome、opera、safari

相邻兄弟元素选择器 – 直接兄弟
1、概念：可以选择 紧接 在另一个元素后的元素，而且他们具有一个相同的父元素
2、语法：元素+兄弟相邻元素
3、兼容：ie8+ chrome safari opera Firefox

通用兄弟选择器
1、概念：某元素后面的所有兄弟，而且他们具有一个相同的父元素
2、语法：元素~后面所有兄弟元素
3、兼容：ie8+ chrome safari opera Firefox

群组选择器 ，
1、概念：具有相同样式的元素分组在一起，每一个选择器之间用逗号, 分隔开
2、语法：元素1，元素2，。。。。元素n
3、兼容：ie6+ chrome safari opera Firefox

属性选择器

1、概念：对带有指定属性的HTML元素设置样式，你可以指定元素的某个属性，或者你也可以同时同时指定属性名和属性值
2、语法：元素[属性attribute]
3、兼容：ie8+ chrome safari opera Firefox

元素[属性=“属性值”]
1、概念：属性名=属性值
2、兼容：ie8+ chrome safari opera Firefox

元素[属性~=“属性值”]
1、概念：属性名包含属性值（value值必须是一个独立的单词）的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性^=“属性值”]
1、概念：属性名以属性值开头的所有的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性$=“属性值”]
1、概念：属性名以属性值结尾的所有的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性 *=“属性值”]
1、概念：属性名包含属性值的所有的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性|=“属性值”]
1、概念：选择属性名=属性值或者以属性值-开头的元素
2、兼容：ie8+ chrome safari opera Firefox

伪类选择器

1. 动态伪类 – 锚点伪类，用户行为伪类
2. UI元素状态伪类
3. CSS3结构类
4. 否定选择器
5. 伪元素

动态伪类
1、概念：这些伪类并不存在与html中，只有用户和网站交互的时候才能体现出来
2、详细内容：
动态伪类

1. 用户和网站交互的时候才能体现出的动态伪类
2. 锚点: :link / :visited
3. 用户行为伪类： :hover / :active / :focus

UI元素状态伪类
1、概念：我们把 :enabled（启用） :disabled（禁用） :checked【选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）】这一类伪类称为UI元素状态伪类
2、兼容：ie9+ chrome safari opera Firefox

结构类
1、概念：我们吧css3的 :nth 选择器称为CSS3结构类

1. 我们把css3里的:nth选择器称之为css3结构类
2. :first-child / :last-child / :nth-child(n) / :nth-last-child
3. :nth-of-type / :nth-last-of-type / :first-of-type / :last-of-type
4. :only-child / :only-of-type / :empty

:first-child
选择属于其父元素的首个子元素的每个element元素

:last-child
属于父元素的最后一个子元素的每个element元素
兼容：ie8+ chrome safari opera Firefox

:nth-child(n)

1. 匹配属于其父元素的第N个子元素，不论元素类型
2. 关于参数（n）
   a. number-选择某元素下的第number个element元素 1 2 3 4 …
   b. n（从0开始）-简单表达式 2n 2n+1 2n-1 / odd奇数 / even偶数
   兼容：ie9+ chrome safari opera Firefox4+

:nth-last-child(n)
匹配属于其父元素的第N个子元素，不论元素的类型，从最后一个开始计算
兼容：ie9+ chrome safari opera Firefox4+

:nth-of-type(n)
匹配属于父元素的特定类型第N个子元素的每个元素

:nth-last-of-type(n)
匹配属于父元素的特定类型第N个子元素的每个元素，从最后一个子元素开始计算
兼容：ie9+ chrome safari opera Firefox4+

区别：
1、type 指定元素类型
2、Child 不限制元素类型

:first-of-type
匹配属于父元素的特定类型第N个子元素的首个子元素的每个元素
兼容：ie9+ chrome safari opera Firefox

:last-of-type
匹配属于父元素的特定类型第N个子元素的最后一个子元素的每个元素
兼容：ie9+ chrome safari opera Firefox

:only-child
匹配父元素的唯一子元素的每个元素
兼容：ie9+ chrome safari opera Firefox

:only-of-type
匹配属于父元素的特定类型的唯一子元素的每个元素
兼容：ie9+ chrome safari opera Firefox4+

empty
匹配没有子元素（包括文本节点）的每个子元素–表示啥都没有的元素会被选中！
兼容：ie9+ chrome safari opera Firefox4+

否定选择器(:not)

1. 选择器匹配非指定元素/选择器的每个元素–表达除了这个元素，其他都可以选中
2. 父元素:not(子元素/子选择器)
   兼容：ie9+ chrome safari opera Firefox

CSS权重
1、概念：当很多规则应用到一个元素上，权重就是使哪一种规则生效 - 各个选择器的优先级
2、权重的等级和权值：行内样式（1000）>ID选择器(100)>类，属性选择器和伪类选择器(10)>元素和伪元素(1)>*（0）
3、权重的规则：

1. ID选择器(#id)的权重比属性([id=“idvalue”])高
2. 带有上下文关系的选择器比单纯的元素选择器权重高

section>article{}   /*带有上下文的选择器*/
article{}
1
2

3. !important > 行内 样式 > ID > 类 > 元素 > *

伪元素

1、CSS伪元素用于向某些选择器设置特殊效果
2、语法格式： 元素::伪元素
3、兼容：ie9+ chrome safari opera Firefox

::first-line
1、对元素的第一行文本进行格式化
2、只能用于块级元素 – div section header （可以） – span 行级元素（不可以）

::first-letter
1、用于向文本的首字母设置特殊样式
2、只能用于块级元素 – div section header （可以） – span 行级元素（不可以）

::before
1、在元素的内容之前插入新内容
2、常用"content"配合使用
3、总结：

1. 第一个子元素
2. 行级元素
3. 内容是通过content写入的

::after
1、在元素的内容之后插入新内容
2、常用"content"配合使用，多用于清除浮动

::selection
1、用于设置在浏览器中选中的文本后的背景色和前景色
2、::selection在ie中必须IE9+可以，在火狐中必须加上前缀 ::-moz-selection

::-moz-selection{ /*针对Firefox*/
background:#cc0000;   
color:#fff;   
 }   
::selection {   
background:#cc0000;   
color:#fff;   
}       
1
2
3
4
5
6
7
8

CSS3边框和圆角

CSS3圆角

1、border-radius:一个最多可以指定四个border-*-radius属性的复合属性，为元素添加圆角边框
2、语法：border-radius:1-4 length|%/1-4 length|%
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3指定每一个圆角
1、多个值：四个值：第一个 - 左上角 第二个 - 右上角 第三个 - 右下角 第四个 - 左下角
2、三个值：第一个 - 左上角 第二个 - 右上角和左下角 第三个 - 右下角
3、两个值：第一个值 - 左上和右下 第二个值 - 右上和左下
4、一个值：四个圆角相同
属性：
左上角：border-top-left-radius
右上角：border-top-right-radius
右下角：border-bottom-right-radius
左下角：border-bottom-left-radius

border-radius:20px/30px; 水平半径/垂直半径

案例 ：


为了满足各个浏览器的兼容性，加上技术前缀。
-webkit-chrome
-moz-firefox
-ms-ie
-o-opera

CSS3盒阴影

1、box-shadow属性：可以把设置一个或者多个下拉阴影的框
2、语法：box-shadow:h-shadow v–shadow blur spread color inset;
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3边界图片

1、border-image属性：来构建美丽的可扩展按钮
2、语法：border-image:source slice width outset repeat;
3、兼容：IE不兼容 firefox chrome safari6+ opera不兼容

border-image-source属性
1、指定要使用的图像，而不是border-style属性设置的边框样式
2、语法：border-iamge-source:none|image;

border-image-slice属性
1、指定图像的边界向内偏移
2、语法： border-iamge-slice:number | % |fill;

border-image-width属性
1、指定图像边界的宽度
2、语法： border-iamge-width:number | % |auto;

border-image-outset属性
1、指定在边框的外部绘制border-image-area的量 – 边框区域
2、语法：border-iamge-outset:number|length;

border-image-repeat属性
1、图像边界是否会重复
2、语法：border-iamge-repeat: stretch | repeat | round | initial | inherit;

CSS3背景和渐变

CSS3图像背景区域 – background-clip

1、指定背景绘制区域
2、background-clip: border-box（背景被裁减到边框盒 - 默认值） padding-box（背景被裁减到内边距框）
content-box（背景被裁减到内容框）
3、兼容：IE9+ firefox chrome safari opera

CSS3背景图像定位 – background-origin

1、设置元素背景图像的原始起始位置 -- 指定background-position属性的相对位置
2、background-position:定义背景图片的位置：两个值 – 水平和垂直的偏移量
3、语法：background-origin :

1. border-box（相对于边框位置开始的左上角的偏移量）
2. padding-box（相对于内边框位置开始的左上角的偏移量- 默认值）
3. content-box（相对于内容位置开始的左上角的偏移量）
   4、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3背景图像大小 – background-size

1、指定背景图像的大小
2、语法：background-size: 默认值 - auto

1. length数值 – 第一个值设置宽度，第二个值设置为高度，如果只有一个值，第二个设置为auto（自动）
2. 百分比 – 第一个值设置宽度，第二个值设置为高度，如果只有一个值，第二个设置为auto（自动）
3. cover – 保持图像的纵横比并将图像缩放成将完全覆盖背景背景定位区域的最小 大小
4. contain – 保持图像的纵横比并将图像缩放成将完全覆盖背景背景定位区域的最大 大小
   3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3背景属性整合 – background

1、背景缩写属性可以在一个声明中设置所有的背景属性
2、语法：background：color position size repeat origin clip attachment image;
3、推荐如下：

background: #abcdef url("1.gif") no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
1
2
3
4
5

CSS3渐变

1、可以在两个或者多个颜色之间显示平稳的过渡 – 过渡：颜色的逐渐变化
2、兼容：ie10+ chrome10+ firefox4+ safari6.1+ opera12.1+

CSS3线性渐变 – linear Gradients属性 – 默认是从上往下

1、沿着一根轴线改变颜色，从起点到终点进行顺序的渐变(从一边拉向另一边)
2、语法：background：linear-gradient（direction方向，color1开始颜色，color2结束颜色，。。。。多个渐变色）

对于左右而言：
1、chrome – begin-direction（开始方向），color1,color2…
2、Firefox – end-direction（结束方向），color1,color2…
3、Opera – end-direction（结束方向），color1,color2…
4、标准 – to end-direction（to 结束方向），color1,color2…
对角线
1、chrome begin-level （水平开始方向） begin-vertical（垂直开始方向），color1,color2…
2、Firefox end-level（水平结束方向） end-vertical（垂直结束方向），color1,color2…
3、Opera end-level （水平结束方向） end-vertical（垂直结束方向），color1,color2…
4、标准形式 to end-level（to 水平结束方向） end-vertical（to 垂直结束方向），color1,color2…

线性渐变 – 使用角度
1、语法：background：linear-gradient（angle，color1开始颜色，color2结束颜色，。。。。多个渐变色）
2、角度说明： 单位：deg

线性渐变 – 重复渐变

1、语法：background：repeating-linear-gradient（angle，color1开始颜色，color2结束颜色，。。。。多个渐变色）

径向渐变 – radial-gradient属性

1、概念：从起点到终点颜色从内到外进行圆形渐变(从中间往外拉)
2、语法：background:radial-gradient(center（中心）,shape size（渐变尺寸大小）,star-color,…end-color)

径向渐变 – 颜色节点不均匀分布
1、语法：background:radial-gradient(center（中心）,shape size（渐变尺寸大小）,star-color length|percentage,…end-color length|percentage)

径向渐变 – 设置形状
1、语法：background:radial-gradient(shape（形状）,star-color,…end-color)
2、形状说明：

1. circle 圆形
2. ellipse 椭圆（默认）
3. 注明：如果元素设置高宽值一样，那参数不论设置ellipse还是circle，显示都是圆形

径向渐变 – 尺寸大小关键字
1、语法：background:radial-gradient(size（渐变尺寸大小）,star-color,…end-color)
2、关键字说明：

1. closest-side:最近边
2. closest-corner:最近角
3. farthest-side:最远边
4. farthest-corner:最远角
   形状和尺寸值之间用空格键隔开，不能加逗号

径向渐变 – 重复渐变
1、语法：repeating-radial-gradient(color1,color2…);

IE渐变
1、说明：IE浏览器比较特殊，他的渐变实现效果需要通过过滤镜实现；
2、语法：filter:progid:DXImageTransform.Microsoft.gradient(startColostr=“颜色”，endColorstr=“颜色”，GradientType=0) – GradientType这个值可以有0 1 2。。。。
3、颜色值：必须填写16进制；

CSS3文本和字体

CSS3文本阴影 – text-shadow
1、应用于阴影文本
2、语法：text-shadow: h-shadow（水平偏移） v-shadow（垂直偏移） blur（模糊距离） color（颜色）
3、兼容：ie10+ firefox3.5+ chrome4+ safari4+ opera9.5+
4、注意：模糊程度不能是负数，不然会失去效果

text-outline属性
1、规定文本轮廓
2、语法：text-ouotline: thickness（宽度值） blur（轮廓描边的模糊程度） color（轮廓的颜色）
3、兼容性：任何浏览器暂时不支持这个属性

CSS3换行 – word-break
1、规定自动换行的处理方法
2、语法：word-break: normal（正常） break-all（允许在单词内换行） keep-all（只能在半角空格和连字符处换行，中文中，在一行中遇到快到结尾处的标点符号，进行换行）
3、兼容：ie5.5+ firefox15+ chrome4+ safari3.1+ opera15+
4、注意：此属性指定非CJK脚本的断行规则 – CJK(中日韩)脚本

CSS3换行 – word-wrap
1、允许长单词或者url地址换行到下一行
2、语法：word-wrap: normal break-word（以断开的文字进行换行）
3、兼容性：ie5.5+ firefox3.5+ chrome23+ safari6.1+ opera12.1+

CSS3新文本属性 – text-align-last属性
1、规定如何对齐文本的最后一行
2、语法：text-align-last:

1. auto – 默认左对齐
2. left – 左对齐
3. right – 右对齐
4. center
5. justify
6. strat – 随大流
7. end – 与文章相反设置
8. initail – 默认和auto
9. inherit – 继承父元素

CSS3新文本 – text-overflow属性
1、规定当文本溢出包含元素时发生的事情
2、语法：text-overflow
11. clip – 溢出部分会修剪掉
12. ellipsis – 溢出部分会以省略号表示
13. string – 只能是火狐支持，表示以我自定义的方式对溢出部分自定义
3、兼容：ie6+ firefox7+ chrome4+ safari3.1+ opera11.1+（9.0 -o-）
4、注意：配合与overflow:hidden一起使用

CSS3字体 – @fontface语法规则 – @fontface是css3的一个模块

@fontface{
  font-family:<yourwebfontname>:  字体名称
  src:<source>[<format>],<source>[<format>]; 字体存放路径，可多个
  [font-weight:<字体加粗>]
  [font-style:字体样式]
}
1
2
3
4
5
6

取值说明
1、yourwebfontname： 自定义名称他将被引用到web元素的font-family中
2、source：自定义字体存放的路径，可以是相对也可以是绝对
3、format：自定义字体的格式，主要用来帮助浏览器识别的
4、weight和style：-- normal 和 bold加粗

1. weight：定义字体是否加粗
2. style定义字体样式，比如斜体

字体格式

1、.ttf - truetype – -- 是windows和mac最常见的字体，是一种raw格式，因此他不为网站优化
兼容：ie9+ firefox3.5+ chrome4+ safari3+ opera10+ iosmobile – safari4.2+
2、 .otf -opentype – – 被认为是一种原始的字体格式，是内置在TrueType基础上，所以也提供了更多的功能
兼容：除了ie浏览器不兼容之外，其余同上
3、.woff - woff （web open font format） – – 是web字体中最佳的格式，他是一个开放的TrueType /OpenType 的压缩版本（压缩版本小，占用内存小，加快网页的运行速度），同时也支持原数据包的分离
兼容：ie9+ firefox3.5+ chrome6+ safari3.6+ opera11.1+ – 苹果手机端不支持
4、.eot - embedded-opentype – – 是IE专用字体，可以从TrueType 创建此格式的字体
兼容：ie4+
5、.svg - svg 是基于svg字体渲染的一种格式（svg其实是可以渲染图片的一种字体格式）
兼容：ie和火狐不兼容，chrome4+ safari3.1+ opera10+ iosmobile – safari3.2+

字体应用
1、大部分支持 – .woff .eot 效果更好的话，更多浏览器支持 – .svg

**

推荐通用模板

**

@font-face {
      font-family: 'myfont';   自定义名称，要有意义，不准数字
      src: url('font/myFont.eot');  兼容ie9以上版本
      src: url('font/myFont.eot?#iefix') format('embedded-opentype'),兼容ie6-8版本
      url('font/myFont.ttf') format('truetype'),主要针对手机端浏览器  safari  android  ios
      url('font/myFont.woff') format('woff'),兼容所有浏览器  
      url('font/myFont.svg#myFont') format('svg');针对ios端开发   legacy ios
      font-weight: bold;
      font-style: normal;
    }

会从上到下的兼容效果依次执行
1
2
3
4
5
6
7
8
9
10
11
12

CSS3转换

CSS3的Transform
1、变形属性 – 让一个元素在坐标系统中变形，这个属性会包含一系列的变形函数，可以移动，旋转和缩放元素
2、语法：transform ：

1. none – 没有变形 – 默认值
2. <transform-function>[<transform function>]

3兼容：ie10+ firefox16 chrome36 safari9 opera12.1

transform的2D转换

1. rotate() – 旋转
2. translate() – 平移
3. scale() – 缩放
4. skew() – 扭曲或者斜切

旋转rotate
1、通过指定的角度对原元素指定一个2D的旋转
2、语法：transform:rotate(<angle>);
3、参数说明：

1. angle指定角度
2. 正数表示顺时针旋转
3. 负数表示逆时针旋转
   4、注意点：
4. rotate角度值参照圆形角度设置，正数顺时针，负数逆时针。
5. 为了满足兼容性，需要加上前缀。

移动translate
1、translate() 方法，根据左（x轴）和顶部（y轴）位置给定的参数，从当前元素位置进行移动的

三种情况：

1. translateX（x） – 仅仅水平方向移动（X轴移动）
2. translateY（y） – 仅仅垂直方向移动（Y轴移动）
3. translate（x，y） – 水平方向和垂直方向同时移动（X轴移动和Y轴移动）

translateX（x）
1、通过给定一个X轴方向上的数值，指定一个translation平移
2、语法：transform: translateX(可以写一个值等)
3、参数值说明：

1. 数值可以改变大小
2. left right无效果
3. %可以用
4. em单位可以用

translateY（y）
1、通过给定一个Y轴方向上的数值 指定一个translation
2、语法：transform: translateX(可以写一个值等)
3、参数值说明：

1. 数值可以改变大小
2. left right无效果
3. %可以用
4. em单位可以用

translate（x,y）
1、通过矢量[tx,ty]指定一个2D平移，tx是第一个过渡值参数，ty是第二个过渡值参数。
2、语法：transform: translate(水平值，垂直值)；
3、参数值说明：

1. X轴的值必须填写的。
2. Y轴值可填可不填，如果不填写默认是0

缩放scale
1、scale() 方法，指定对象的2D缩放。
2、三种情况：

1. scaleX()元素水平方向缩放。
2. scaleY()元素垂直方向缩放。
3. scale(x,y)元素水平方向和垂直方向同时缩放

scaleX()
1、使用[sx,1]缩放矢量执行缩放操作的，sx为所需参数
2、语法：transfrom: scaleX(<number>);
3、参数说明：

1. .5表示 0.5 代表以中心为原点进行百分之50的缩小
2. 设置比1大的值,表示放大
3. 设置为0图片显示无

scaleY()
1、使用[1,sy]缩放矢量执行缩放操作的，sy为所需参数
2、语法：transfrom: scaleY();
3、参数说明：

1. .5表示 0.5 代表以中心为原点进行百分之50的缩小
2. 设置比1大的值,表示放大
3. 设置为0图片显示无

scale()
1、使用[sx,sy]缩放矢量的两个参数指定一个2D缩放
2、语法：transfrom: scale([]);
3、参数说明：

1. .5表示 0.5 代表以中心为原点进行百分之50的缩小
2. 设置比1大的值,表示放大
3. 设置为0图片显示无
4. 两个参数说明x和y都进行比例缩放，一个参数说明x和y同时进行等比例缩放

扭曲skew
1、skew()方法，指定对象的斜切扭曲
2、三种情况：

1. skewX(x)元素在水平方向扭曲变形
2. skewY(y)元素在垂直方向扭曲变形
3. skew(x,y)元素在水平方向和垂直方向扭曲变形

skewX(<angle>)
1、按给定的角度沿着X轴指定一个斜切变换
2、语法：transform: skewX(角度)
3、参数说明：

1. 正值：逆时针
2. 负值：顺时针
3. 总结：-90deg到90deg是正确的取值范围

skewY(<angle>)
1、按给定的角度沿着Y轴指定一个斜切变换
2、语法：transform: skewY(角度)
3、参数说明：

1. 正值：顺时针
2. 负值：逆时针
3. 总结：-90deg到90deg是正确的取值范围

skew(<angle>,[<angle>])
1、按给定的角度沿着X轴和Y轴指定一个斜切变换
2、语法：transform: skew(角度,[角度])
只有一个值时，仅表示沿x轴扭曲

transform的3D转换

1. rotate3d() – 3D方向的旋转
2. translate3d() – 3D方向的平移
3. scale3d() – 3D方向的斜切

旋转rotate X()
1、指定对象在X轴方向的旋转角度
2、语法;transform： rotateX(angle)
3、angle表示角度

旋转rotate Y()
1、指定对象在Y轴方向的旋转角度
2、语法;transform： rotateY(angle)
3、angle表示角度

旋转rotate Z()
1、指定对象在Z轴方向的旋转角度
2、语法;transform： rotateZ(angle)
3、angle表示角度

旋转rotate 3d()
1、指定对象的3D旋转角度
2、语法;transform： rotate(x,y,z,angle)
3、前三个参数分别表示旋转方向x,y,z，第四个参数表示旋转的角度，参数不允许省略。
4、建议取值的范围：

1. x:0-10
2. y:0-10
3. z；0-10
4. angle：-360deg-360deg

移动translateZ
1、指定对象的Z轴的平移
2、语法：transform：translateZ（）
3、参数对应Z轴，不允许省略
4、发现改变值没有变化，注意设置5px表示向屏幕来了5个像素，负值类似。

移动translate3d
1、指定对象的3D位移
2、语法：transform：translate3d（x,y,z）
3、参数对应各个轴，参数不允许省略

缩放scaleZ（）
1、指定对象的Z轴的缩放
2、语法：transform：scaleZ();
3、参数对应Z轴，不允许省略。
4、没有任何变化，但是厚度发生了改变

缩放scale3d（）
1、指定对象的3d缩放
2、语法：transform：scale3d(x,y,z);
3、参数对应各个轴，不允许省略。
4、三个值缺一不可，少一个的话将不再显示

transform和坐标系统
1、transform和坐标的引入目的是为了进行旋转、缩放、平移能够有一个基准点

transform-origin属性
1、此属性允许更改转换元素的位置。
2、语法：transform-origin： x y z；
3、参数：可以设置百分比 也可以设置类似：left top

扩展属性 – transform-style属性
1、指定嵌套元素是怎样在三维空间呈现的。
2、语法：transform-style: flat – 表示所有子元素在2d呈现 | preserve-3d – 表示所有子元素在3d呈现
3、默认值flat – 默认值表示平常在2d中展现的效果。

perspective属性
1、指定观察者与[z=0]平面的距离,使得具有三维位置变化的元素产生透视的效果
2、语法 ： number – 元素距离视图的距离，以像素计 | none – 与0一样，不设置透视;
3、默认值：none
4、越趋近于0相当于我们靠近屏幕越近，等于0效果显示；负数没有任何效果，但是数值越大的话表示我们越从更高的地方看下去，数值特别大的话，效果不明显的。

perspective-origin属性
1、指定透视点的位置
2、语法：x-axis y-axis；
3、默认值： ： 50% 50%；
4、参数值：
x-axis

1. left
2. center
3. right
4. length – 数值
5. %
   y-axis
6. top
7. center
8. bottom
9. length – 数值
10. 百分比%
    总结：
    1、从顶部看就是俯视
    2、从底部看就是仰视

backface-visibility属性
1、指定元素背面面向用户时是否看见；
2、语法：visible – 背面是可见的 | hidden – 背面是不可见的
3、默认值：visible – 类似透明的效果

display属性

CSS3过渡

简介：通过CSS3属性变化实现动画，产生交互

过渡
1、控制css样式变化的过程
2、过渡 – transition

1. 允许css属性值在一定的时间区间内平滑的过渡（动画形成的过程）
2. 在鼠标点击，获得焦点，被单击或者对元素任何改变中触发并圆滑的以动画效果改变css属性值
   3、兼容性：ie10+ firefox16+ chrome26+ safari6.1+ opera12.1+
   总结：过渡就是一个元素，他的属性从一个值变化到另一个值。

transition-property属性
1、检索或者设置对象中的参与过渡的属性 – 指的就是要过渡到哪一个属性
2、语法：none | all | property

1. none 没有属性变化
2. all 所有属性都会改变 – 默认值
3. property 元素属性名

transition-duration属性
1、检索或者设置对象过渡的持续时间
2、语法： time
3、参数说明：

1. 规定完成或者效果完成所需要的花费的时间（s ms）
2. 默认值：0

不同的过渡曲线有不同的过渡效果，以下四种（过渡时间：2s）：

1. 慢 - 快 - 慢
2. 快 - 慢
3. 慢 - 快
4. 匀速

transition-timing-function属性：
1、检索或者设置对象中的过渡的动画类型

transition-delay属性
1、检索或者设置对象延迟过渡的时间 – 过渡的属性是立刻执行还是延迟执行
2、语法：time
3、参数说明：

1. 指定秒或者毫秒之前等待效果的开始
2. 默认值0 – 不延迟，立即执行

transition的综合
1、transition：复合属性，检索或者设置对象变化时的过渡
2、语法;：transition：property duration timing-function delay；

过渡属性的总结：

1. transition-property：指定属性名
2. transition-duration：过渡时间
3. transition-timing-function：过渡方法
4. transition-delay：延迟

CSS3动画

CSS3动画
1、动画（animation） – 动画可以定义为使用绘画的手法，创造生命运动的艺术。
2、视觉暂留原理 – 人的眼睛看到一幅画或者一个物体后，在0.34s之内不会消失。
3、动画原理 – 把人物的表情等分解后画成许多动作瞬间的画幅，利用视觉暂留原理，在0.34s还没消失之前播放下一幅画。
4、兼容性：IE10+ FIREFOX16+ CHROME 43+ SAFARI9+ OPERA30+ Android(-WEBKIT-)
注意：手机设备的浏览器使用CSS3动画时候，必须加上前缀（-webkit-）
5、CSS3动画：使元素从一种样式逐渐变化到另一种样式的效果。

animation属性

animation-name属性
1、检索或者设置对象所应用的动画的名称
2、语法： keyframename | none；
3、参数说明：

1. keyframename – 指定要绑定到选择器的关键帧的名称
2. none – 指定有没有动画（可用于覆盖从级联的动画）

animation-duration属性
1、检索或者设置对象动画的持续时间
2、语法：animation-duration: time；
3、参数说明：动画播放完成所花费的时间，默认值0 意味着没有动画效果。

总结：

1. 对于animation动画来说，当我们的关键帧写好之后，调用关键帧的2个东西必须写。
2. 一个是动画名称，另一个是动画的持续时间。
3. 动画名称也可以理解为：标识符， 其次就是有时间看动画！

animation-timing-function属性
1、检索或者对象动画的的过渡类型
2、语法：

animation-delay属性
1、检索或者设置对象动画的延迟时间
2、语法：time
3、参数：

1. 可选的，定义动画开始前等待的时间，以s或者ms计算，默认值0

animation-direction属性
1、检索或者设置对象中的动画在循环中是否反向运动
2、语法：属性值如下

1. normal – 正常方向
2. reverse – 反方向运行
3. alternate – 动画先正常运行再反方向运行，并持续交替
4. alternate-reverse – 动画先反向运行再正常运行，并持续交替
5. initial – normal
6. inherit – 继承父元素

animation-iteration-count属性
1、检索或设置对象动画循环交替的效果
2、设置循环：infinite

总结：
alternate和alternate-reverse属性值配合循环infinite设置一起使用，否则失效！

animation-fill-mode属性
1、规定当动画不播放时候（当动画播放完成或者延迟状态下未开始播放），要应用到元素的样式。
2、语法：属性值如下

1. none – 默认值不设置动画之外的状态
2. forwards – 设置对象状态为动画结束时的状态
3. backwards – 设置对象状态为动画开始时的状态
4. both – 设置对象状态为动画开始或者结束时的状态

animation-play-state属性
1、指定动画是否正在运行或者已经暂停
2、语法：属性值如下

1. paused – 指定动画暂停
2. running – 默认值 – 指定正在运行的动画

animation属性
1、复合属性，检索或者设置对象所应用的动画特效。
2、语法：animation：name duration timing-function delay iteration-count direction fill-mode play-state;
3、animation机制：优先选择两个属性 – name属性 – duration属性
一般情况下如果只有一个时间的话，肯定表示duration
如果是两个时间的话，第一个是duration 第二个才是delay

关键帧 – CSS3@keyframes
1、关键帧，可以指定任何顺序来排列Animation动画变化的关键位置。
2、使用说明：使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。
可以通过关键帧多次更改css样式的设定。
3、语法：

@keyframes animationname{
  keyfrtames-selector{
      css-styles;
}
}
参数说明：
1、animationname  --  必选项，定义动画名字
2、keyframes-selector  --  必选项，动画持续的百分比  0-100%   form（0%）   to（100%）
3、css-styles：必选项，一个或者多个合法的css样式属性
1
2
3
4
5
6
7
8
9

动画性能优化
will-change属性
CPU和GPU

1. CPU：中央处理器 解释计算机指令以及处理计算机软件中的数据。
2. GPU：图形处理器，专门处理和绘制图形的相关硬件。GPU是专门执行复杂的数学和几何计算而设计的。
3. 硬件加速：在计算机中将非常大量的工作分配给专门的硬件处理，减轻CPU的工作压力。
4. will-change：增强页面的渲染性能。
   现状：css动画等并不会直接触发GPU加速，而是使用浏览器稍慢的软件处理渲染引擎
   在3D变形有自己的layer层，2D变形不会有的。
   代价：不断占用的RAM和GPU的存储空间。

will-change属性
1、提前告知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
2、语法：will-change:属性值如下：

1. auto – 自动适应
2. scroll-position – 将要改变元素的滚动位置
3. contents – 将要改变元素的内容
4. custom-ident – 明确指定将要改变的属性和给定的名称 --》 will-change:transform;
5. animateable-feature – 指定动画的一些特征值 – 》 will-change: left/top/margin;
   3、兼容：ie13+ firefox47+ chrome49+ opera39+ ios9.3+ Android52+
   4、注意点：不要滥用