CSS3~~2D转换效果

位移translate(px,px)

translate

• 对于行内元素没有效果
• 不会影响其他元素位置

transform:translate(x,y);
transform:translateX(x);
transform:translate(x,0);
transform:translateY(y);
transform:translate(0,y);

旋转rotate(deg,deg)

对元素元转给定角度，正值为顺时针，负值为逆时针，单位deg

/*顺时针旋转10°*/
transform:rotate(10deg);
/*逆时针旋转120°*/
transform:rotate(-120deg);

缩放scale

scale(x,y)方法表示缩放元素，x表示宽度缩放倍数，y表示高度缩放倍数
当x,y为负值是，会分别横向倒置、纵向倒置

/*宽度不变，高度变大2倍*/
transform:scale(1,2);

翻转扭曲skew(deg,deg)

将元素翻转扭曲给定角度

绕x轴翻转20°，绕y轴翻转50°
transform:skew(20deg,50deg);

综合转换matrix

transform:matrix(scale x,skew x,skew y,scale y,translate x,translate y)

但是在H builder上尝试scale后其他的方法没了作用，以及matrix也不行…目前还不太明白为什么。。。

来源：https://blog.csdn.net/qq_45580642/article/details/102776112