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);
}
相关推荐
wordbaby2 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
卿·静9 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia22 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia25 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub28 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw31 分钟前
hippy的主要原理
前端
子兮曰34 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068834 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97637 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖37 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript