最实用的常用css3知识点梳理二：过渡+2d变形+3d变形

上一篇:最实用的常用css3知识点梳理一：选择器+计数器

四:过渡

1 语法：
1.1 transition-property:样式名;需要过渡的样式，可写多个，可以写all代表所有合法过渡样式
1.2 transition-渡ration:2s;样式过渡的时间，可以写多个
写一个时间，即为该时间控制所有过渡样式
写多个时间，则根据时间个数分组，控制对应样式，如两个时间，第一个控制1，3，5…个样式
1.3 transition-timing-function:关键字/贝塞尔曲线;控制过渡效果，如先快后慢，平稳过渡，提速过渡等
1.4 transition-delay:延迟时间;控制过渡延迟执行:可设置0和负值
设置赋值表示动画默认已经执行了这段时间的过渡，比如一个样式过渡的执行时间是3s，
延迟时间是-1s，该样式过渡会从执行2s，且在执行一开始该样式就是本应过渡1s后的状态
2.语法简写
transition:width 2s cubic-bezier(.62,-0.38,.91,-0.33) 1s,
height 4s linear -1s;
3.样式覆盖
通常对同一元素的统一样式设置俩次过渡，后面的会覆盖前面的
但如果后面的过渡执行时间与延迟时间的和小于等于0，则不发生覆盖
4.过渡触发条件

4.1触发过渡
  4.1.1.    使用状态伪类
  4.1.2.JS，主要是事件触发和计时器，直接设置不会触发过渡
  4.1.3.多媒体选择器  @media
4.2设置过渡的时间，必要属性
4.3必须样式值得变化
4.4合法的过渡样式，能过平滑改变的样式，如大小，颜色，位置，通常可用数值表示

5.状态伪类（如:hover）失效后的样式回复
把过渡写在默认样式里，状态任何被过渡支持的样式变化都会发生过渡，所以状态失效后会产生回复过渡；
把过渡写在状态样式里，过渡只会发生在状态变化触发的样式改变时，不会有回复过渡的效果
6.隐式过渡
如果对一个样式设置过渡效果，其他合法过渡样式并没有设置过渡效果，但其他这些样式如果是
参照设置样式的属性设置的话，那他们也会共享该过渡效果
肯定听不明白吧，我们举个栗子：

    .box{
                    font-size:12px;
                    width:10em;
                    height:10em;
                    transtion:font-size 2s;
                }
                .box:hover{
                    20px;
                }

应该可以想象吧，元素的大小，宽高共享了字体大小的过渡效果

五:transform-2d

1.语法：
1.1 transform: scale(2)；扩大2倍//
scale（）值小于1缩放，可设置负值值，扩大倍数为绝对值，单元素会颠倒; 为0值呢？会怎么样？你自己想想，你说会怎么样
1.2 transform: skew(30deg);
逆时针倾斜 正数
transform: skew(-30deg);
顺时针倾斜 负数
这里需要注意的是倾斜与旋转是不同的，倾斜是元素的边界倾斜，使元素变形；旋转是整个元素和元素内容旋转
1.3 transform: translate(200px)
位移 只能设置一个值，想右移动
transform: translateX(200px)
效果同上
transform: translateY(200px)
向下移动
1.4 transform: rotate(-360deg);
旋转，方向和倾斜相反，正值顺时针

2.特点:
1.只会影响显示，但不会影响元素在文档结构的位置大小，不会对其他元素产生影响
2.器文本内容和后代元素也会随之变化
3.默认的变形中心是元素的几何中心
4.只对块级元素生效（block table inline-block）
5.元素的层级会提升，（高于定位元素，低于z-index:1）但不会脱离标准流
3.变形的方向
所有2d变形函数都有X Y两种子函数，如果不写明则默认取一个方向
位移：水平方向 大小：以中心向四周 倾斜：水平方向 旋转：Z轴（下文将讨论）
**这里要注意：设置两个方向时要在一条transform中设置

transform：translateX（200px）translateY（200px）//有效

transform：translateX（200px）
transform：translateY（200px）//这条语句会覆盖上面的语句

4.中心点
上面提到了中心点，变形中心点对transform是个很重要的概念
位移其实是中心点的位移，倾斜、扩大和旋转都是以中心点为参照物的
语法： transform-origin: 百分值/像素值/关键字
关键字（left…center）一般只设置一个，中心点为对应边的1/2处
百分值和数值都可以设置两个也可以混合设置 参考系原点元素左上角
第一个值是left值 第二个值是top值
5.连写
transform：属性值的连写与其它样式连写有些区别，因为这些属性值都是函数，
同时这些变化量都是矢量，不同矢量函数在连写时会互相影响，这种影响在translate（）函数写在其它函数后时最为明显
这种影响的原理涉及到矢量计算，其实是线性代数的范畴，这里我们不过多阐述，我们重点关心的是这种影响的表现

1.translate()写在rotate（）时，x轴和y轴的也相应“旋转”
2.translate()写在scale（）时，位移的距离扩大（缩小）相应倍数

总结一下rotate（）影响位移方向，scale（）影响位移距离，当然这都发生在translate()写在后面时。
**注意：连写的函数是分先后计算的，但改变的样式是同时进行的

六:transform-3d

1.语法:
1.1 transform-style:preserve-3d;
开启3d空间，事实上chrome的的默认值就是这个
1.2 perspective:300px;
开启景深，0或者正值
在不给父元素开启景深时可以用transfrom:perspective(300px)为特定子元素开启景深效果

translateZ：200px:-200px;
从元素本来位置向景深点方向推动200px（这句话很重要）

2.景深
（我感觉这本不是一个多难理解的概念，因为大家总拿来说，反而显得它有多高大上@闭包)
开启景深就是开启了近大远小的效果，景深的值对应一个点也就是人们常说的景深点
景深点是屏幕内的一个点，就是“近大远小”的最小点，就是你看向远方时的视线深处
这也就能理解了，离景深点越近元素看上去就越小。
要注意translateZ的0值不是屏幕，而是元素本来的面，所以translateZ可以有正值
元素远离景深点，所以看起来会变大
translateZ的负值可以大于景深的值，且元素会继续缩小但不会收缩成一个点
3.景深中心点偏移:
开启景深后，景深中心点就在一个平面的几何中心上
可以用perspective-origin:left样式使景深点在这个平面上发生偏移
4.backface-visibility: hidden;
背面隐藏，元素旋转后背面将不会显示