CSS基础 transform属性的基本使用 移动 旋转 缩放
1.实现元素位移效果
语法:transform:translate(x轴水平移动距离,Y轴垂直移动距离)
取值:正负都可以
取值方式:数字+px
百分比 :参照自己本的盒子的百分比 比如:本身自己的宽度是100px 那么x轴的百分之100,则走的是100px
使用写法:
transform:translate(100px,50px);/*向右移动100px,向下移动50px*/
transform:translate(-100px,500px); /*向左移动100px,向上移动50px*/
transform:translate(100%,50%) /*沿着x轴自身的走100%像素,Y轴的50%像素*/
transform:translate(100px)相当于transform:translateX(100px); /*沿着x轴走100px*/
transform:translateY(100px); /*沿着Y轴移动100px*/
2.rotate实现元素旋转效果
语法:transform:rotate(角度);/*280deg 即是280度,此值正负数都可以*/
注意:必须要有过度过程:transtion:all 1s;整数值是顺时针旋转,负数值是逆时针旋转
2.2 修改以什么为旋转点(默认为中心)
语法:transform-origin:取值;
取值可以为:方位名词、百分比、数字+px
方位名词:left,top,right,bottom
例如:transform-origin:left bottom; /*围绕左下角旋转*/
3.scale修改元素的尺寸
语法:tranform:scale(x轴缩放倍数,y轴缩放倍数)
特点:是从中心点放大缩小
注意:1.建议只是用x轴或者y轴其中一个,让其等比例缩放
2.数字等于1不变,小于1缩小,大于1放大
注意:注意:注意:重要的话说三遍!tranform 对行内标签无效
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)