H5中的2D转换和过渡

Html5中的2D转换和过渡

（1）2D转换

概念：就是元素在2D平面上实现移动，旋转，缩放，斜切的操做就称之为2D转换

语法：transform：值

值：移动，旋转，缩放，斜切

（1.1）移动

transform：translate（）

参数说明：

（1）只有一个值的状况下，表示水平方向运动，正值向右，负值向左，也能够接受百分比，百分比参照的是自身的宽，高

（2）两个值分别控制水平和垂直

（3）移动不会影响其余的元素，相似于相对定位

（4）咱们能够经过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,若是没有宽度的话，盒子最大的宽只能达到父盒子的一半

（5）若是想要单个的方向移动 能够写成 translateX（）和translateY（）

（1.2）旋转

transform：rotate（）

参数说明：

（1）单位是deg  角度

（2）总体发生旋转（包括里面的内容）

（3）正值是顺时针方向旋转 负值反之

（4）中心点能够控制

（1.3）控制中心点

transform-origin：值

值说明：

（1）值能够是方位名词，能够是像素，也能够是百分比（参照的是自身的宽高）

（1.4）缩放

transform：scale（）

参数说明：

（1）没有单位，接受数值和小数

（2）只有一个值的状况，总体缩放（等比例）

（3）两个值的状况，宽度和高度分别缩放（可能会变形）

（4）边框也是会缩放的，而且若是想要一个方向缩放，另一个方向须要写一个1

（5）缩放的中心点也能够被控制

（1.5）斜切

transform：skew（）

参数说明：

（1）单位是deg

（2）只有一个值的状况下，水平斜切

（3）两个值的状况下，水平垂直分别斜切

（4）斜切的中心点也能够被控制 若是是X轴斜切 中心点控制上下 若是是Y轴斜切 中心点控制左右

总结：

（1）移动，斜切，放大都是能够经过X或者Y去控制某一个方向

（2）中心点能够控制旋转，缩放，斜切

（3）若是咱们想要多个2D效果共存，须要采用连写的方式

（4）当在不一样场景出现须要transfrom的时候，须要复制前面已经存在的，防止覆盖

（5）Transform的转换效果顺序尽可能保持统一，若是不统一会出现一些问题

（2）过渡

首先声明，过渡不是动画，是由css的一种状态到另一种状态中间变换的过程，咱们称之为过渡

transition：值

值说明：

（1）那个属性须要过渡就写什么属性 能够用all来代替所有 （必写）

（2）过渡持续的时间，单位能够s或者是ms （必写）
（3）过渡的曲线

（4）过渡从什么时候开始

css3定义动画新策略：css3的底层是c++，而JQ的animate是用定时器来完成的，因此说css3的运行效率会比animate高出不少，因此但凡是一些不是功能性的动画，不须要保证兼容的时候，一概推荐你们用css3去实现，移动端的动画都用过渡去实现（由于手机的硬件相对电脑来讲性能差，因此用c3实现 效率更高）

小细节：display和渐变是不能直接产生过渡的 ...

：过渡的属性最好写全