在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理
deg是css3中使用的一种角度单位。
旋转: 使用rotate方法,在参数中加入角度值,在角度值后要加上角度单位deg。旋转方向为顺时针。例rotate(45deg)

缩放: 使用scale方法,在参数中指定缩放的倍率,0.5表示缩小一半。scale(水平缩放倍率,垂直缩放倍率),可以同时修改X,Y的缩放。scale(0.5,2)
倾斜: 使用skew方法,在参数中加入角度值,skew(水平倾斜角度,垂直倾斜角度),如果只有一个参数则认为只在水平方向倾斜。skew(30deg,30deg)
移动: 使用translate方法,在参数中加入移动值,translate(水平移动距离,垂直移动距离)以现在所处位置为原点,右边为X轴,下边为Y轴。

 若只是用一个参数则默认为只在X轴方向移动,垂直方向不移动。

 #transform-1{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);}
#transform-2{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5);}
#transform-3{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5,2);}
#transform-4{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:skew(30deg,30deg);}
#transform-5{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:translate(30px,30px);}
View Code

相关文章:

  • 2022-12-23
  • 2021-09-04
  • 2021-06-26
  • 2021-09-25
  • 2021-10-20
  • 2022-12-23
  • 2021-07-24
  • 2021-11-30
猜你喜欢
  • 2021-07-09
  • 2022-12-23
  • 2022-01-07
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案