CSS详知识点——CSS变形

transform:属性

translate():平移函数,基于X、Y坐标重新定位元素的位置

translateX(tx)表示只设置X轴的位移

复制代码
#yi{
      transform:translate(50px,30px);
      
 }
 #yi{
       transform: translateX(100px);           //只移动X轴上的方向
        }
 #yi{
       transform: translateY(100px);           //只移动Y轴上的方向
        }
scale():缩放函数,可以使任意元素对象尺寸发生变化
复制代码
 #er{
            transform: scale(0.5,0.5);          //横着缩小两倍,竖着缩小两倍
        }
skew():倾斜,元素会变形,不会旋转

单位是deg度数

正值表示逆时针倾斜,负值表示顺时针倾斜

skewX(ax):表示只设置X轴的倾斜

skewY(ay):表示只设置Y轴的倾斜

复制代码
#san{
  transform: skew(30deg);      
}
#san{
   transform: skewX(40deg);                  //沿X轴倾斜40度
      
}
rotate():顺时针旋转

单位deg度数

复制代码
#san{
  width: 300px;                       //这块当时旋转不动是因为盒子太长了,没设置宽度
  transform: rotate(30deg);
}
相关推荐
黑客老李几秒前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录2 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia3 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽4 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥5 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02349 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder14 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder15 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep22 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛27 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm