transform的三个属性transform的三个属性
translate 移动
语法
div {rotate属性
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();
书写顺序会影响转换效果 因为先旋转会改变坐标轴⽅向
`
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论