CSS3变形

85 阅读1分钟

变形

transform 变形

transform:translate()平移

transform:translatex(1px)x轴平移

transform:translatey(1px)y轴平移

同时写x轴和y轴的的话,会被下面的覆盖

复合属性:transform:translate(100px,100px)

缩放

transform:scale缩放

transform:scale(1) 一个值表示x轴y轴都是1(1表示不变)

transform:scale(0) 表示缩小到消失

ransform: scale(2,1) 放大x轴

transform: scale(1,2) 放大y轴

旋转

transform:rotatex(30deg)(沿着x轴旋转,改变高度)

transform:rotatey(30deg)(沿着y轴旋转,改变宽度)

复合属性:transform:rotate(30deg)(只能设置1个值)

倾斜

transform:skew倾斜

transform:skew(60deg,20deg)

第一个参数表示x轴,按照逆时针进行旋转;宽度变化,高度不变

第二个参数表示y轴,按照顺时针进行旋转;高度变化,宽度不变