C3的一些高级特效(1)

transform 变形

2D位移 transform:translate

写法:

transform: translate(20px, 30px);表示x轴移动的向量长度x轴向右20px,y轴移动的向量长度y轴向下30px

transform:translateY(30px) 表示 X轴不移动,Y轴向下30px.以此类推,可以有负值.

2D缩放 transform: scale

写法:

transform: scale(1,1) 表示不变可简写transform: scale(1)

transform: scale(2,.5) 表示宽放大到两倍,高缩小一半

transform: scaleX(2) 表示只把宽放大到两倍

倾斜 transform: skew

单位deg,表示 度

写法:

transform:skew(30deg) 表示x轴向左倾斜30度,y轴不变

transform:skew(30deg,10deg) 表示x轴向左倾斜30度,y轴向右倾斜10度

☆倾斜时会改变元素形态

旋转transform: rotate

写法:

transform: rotate(20deg);  表示绕着中心点向右旋转20度,

可以设置负值,负值就是向左旋转

☆旋转不改变元素原形态