transform的三个属性transform的三个属性
translate 移动
语法
div {
transform:translate(x,y) //可以不带单位
transition:all 1s; //添加过渡
}
rotate 旋转
语法
div {
transform:rotate(n deg); //deg为⾓度顺时针为正值逆时针为负值
transition:all 1s; //添加过渡
}
- 注意：可以设置⽅位名词
- transform-origin:left bottom; //以左下⾓为中⼼进⾏旋转
scale 缩放
语法
div {
transform:scale(x,y);//x,y不加单位是倍数
transition:all 1s; //添加过渡
}
存在等⽐例缩放:transform:scale(2);
2D转换综合写法
transform:translate() rotate() scale();
书写顺序会影响转换效果 因为先旋转会改变坐标轴⽅向
`
