css2D过渡转换

浏览器前缀

• 谷歌 苹果： -webkit-
• 火狐 ： -moz-
• IE ： -ms-
• 欧朋： -o-

过渡2D转换

transition 过渡：
以前，元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见，但是css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。

• transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。（ 必须填写的属性）
  
• transition-duration: 过渡的时间，单位可以是s或者ms。（ 必须填写的属性）
  
• transition-delay:指定过渡生效的延迟时间
  
  注：此意思单个属性间隔，如多个间隔为2秒如下：
  
  👆为每个间隔两秒
• transition-timing-function:
• ease 慢慢减
• linear 匀速
• ease-in 加速
• ease-out 减速
• ease-in-out 先加速后减速

2D转换缩放

缩放，位移，旋转，倾斜
transform 属性。
缩放： 放大缩小
格式：
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会旁边的盒子造成影响。

鼠标悬停之后：

转换位移

位移 translate
格式：
tramsform：translate（水平位移，垂直位移
属性值：
px 正值：向右或向下
百分比 是按照盒子本身的宽高,只写一个值时，是水平位移。

运行结果

旋转

旋转：rotate
格式： transform：rotate（角度）
单位：deg（度）
transform-origin: 变换原点
格式：transform-origin: 水平坐标 垂直坐标
px
百分比 按照盒子的宽高。50%=center
单词 left center等
transform 后面可以书写多个转换，但是书写顺序不同，效果不同
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移，再旋转

第二种会先旋转，再位移。

倾斜

skew
格式：transform：skew（水平倾斜角度，垂直倾斜角度）
单位是deg，正值 顺时针，负值逆时针。
所有的转换属性，只能添加给块级元素，行内元素无效。
正值：


负值：