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);
}
相关推荐
千鼎数字孪生-可视化9 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月9 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码32 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder35 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte39 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang44 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试