tranform(2D)改变盒子的形态(位移,旋转,缩放)
1 translate可以让盒子沿着x轴或者y轴来移动。
语法:
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
2 .1旋转 rotate
语法:
transform: rotate(45deg); 一定写单位
如果是正度数,则是顺时针旋转
如果是负度数,则是逆时针旋转
2.1 设置中心点 transform-origin
/* 设置旋转的中心点位置 */
transform-origin: right bottom;
2.2
transform: translate(-50%, -50%) rotate(360deg);
多形态变形小技巧
如果需要移动,也需要旋转,则一定先写移动,后写旋转, css属性书写顺序影响代码执行。 注意,多个值之前用 空格隔开。 3 缩放 scale 语法; transform: scale(1.2); 它比这宽度和高度最大的优势: 他是用中心点来进
共有 0 条评论