默认原点transform-origin: 50% 50%元素中心 可以修改cssCSS transform: rotate () 总结1. 基础语法csstransform: rotate(角度);支持单位deg度最常用rotate(20deg)rad弧度、turn圈1turn360deg2. 旋转方向正数顺时针旋转负数逆时针旋转例rotate(-25deg)水印经典斜角3. 旋转原点关键/* 左上角旋转 */ transform-origin: 0 0;4. 重要特性只改变视觉角度不占用原始布局空间不会挤开其他元素属于transform变换硬件渲染性能优于修改 top/left多个变换叠加空格分隔csstransform: rotate(-20deg) scale(0.9);5. 区分三组易混淆 rotate拓展rotate()平面 2D 旋转围绕 Z 轴日常水印使用这个rotateX()围绕水平轴上下翻转3DrotateY()围绕垂直轴左右翻转3D6. 水印开发最简标准搭配js运行ospan.style.transform rotate(${deg}deg) ospan.style.transformOrigin center极简一句话速记rotate (数值 deg)正值顺时针、负值逆时针默认绕元素中心旋转只改变视觉不影响页面布局。CSS transform: scale () 完整总结1. 基础语法csstransform: scale(x); /* 或者分别缩放宽、高 */ transform: scale(x, y);scale(a)等比例缩放宽、高同时放大缩小scale(a,b)单独控制水平缩放 x、垂直缩放 y2. 参数取值规则表格参数值效果 1放大 1原始大小默认0 ~ 1缩小 0先缩放 镜像翻转很少用示例csstransform: scale(0.8); /* 整体缩小到80% */ transform: scale(1.2); /* 整体放大120% */ transform: scale(0.9,1); /* 宽度缩小高度不变 */3. 旋转 缩放组合水印场景常用多个 transform 函数空格隔开js运行ospan.style.transform rotate(${deg}deg) scale(0.9)4. 缩放原点默认transform-origin: 50% 50%元素中心 缩放围绕原点进行和 rotate 共用同一个原点csstransform-origin: center;5. 核心特点仅视觉变化不改变原始布局尺寸页面占据空间保持原样不会挤压周边元素。GPU 加速性能很高优于修改 width/height。scale 是2D 缩放拓展scaleX()/scaleY()单向缩放。6. 易踩坑提醒✅ 多个变换书写顺序会影响最终效果rotate() scale()≠scale() rotate()一句话速记scale (数值) 控制元素放大缩小1 为原尺寸小于 1 缩小、大于 1 放大和 rotate 共用 transform-origin 原点不影响页面布局。Grid 网格布局完整讲解结合图中代码一、基础概念display: grid→CSS 二维布局系统同时控制「行、列」是最强大的布局方案 flex 是一维布局要么横向、要么纵向Grid 可以同时操控横竖。二、区分两个极易混淆属性图中重点1.grid-area: span 2 / span 4;作用子元素属性代表「这个格子横跨多少行、多少列」 语法cssgrid-area: 横跨行数 / 横跨列数;.z-shape { grid-area: span 2 / span 4; }✅ 该元素纵向占 2 行横向占 4 列2 行 4 列大小区域.l-shape { grid-area: span 2 / span 3; }✅ 该元素纵向占 2 行横向占 3 列2 行 3 列大小区域⚠️注意grid-area写在子元素上控制子元素占用网格空间。2. 父容器定义网格必须很多人漏写想要子元素的span生效父盒子必须先声明网格行列css.parent { display: grid; /* 定义 3行 5列举例 */ grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }1fr剩余空间均分单位fraction 份额三、grid-template 简写截图第二段代码cssgrid-template: inherit;grid-template是父容器简写属性一次性合并grid-template-rowsgrid-template-columns完整语法css/* 3行 2列 */ grid-template: 1fr 1fr 1fr / 1fr 1fr; /* 等价分开写 grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; */inherit代表继承父元素的网格配置。截图方案思路子元素grid-template: inherit让内部网格和外层网格尺寸保持一致实现嵌套网格对齐。四、语法对照表重点区分父 / 子属性表格属性写在谁身上作用display:grid父容器开启网格布局grid-template-rows / columns父容器设置一共有多少行、多少列grid-area: span x / span y子元素子元素横跨 x 行、y 列五、举一个可运行示例对应截图 z-shapehtml预览style .wrap { display: grid; grid-template-columns: repeat(4, 1fr); /* 4列 */ grid-template-rows: repeat(2, 80px); /* 2行 */ gap: 8px; } .z-shape { background: #409eff; /* 占2行4列 */ grid-area: span 2 / span 4; } /style div classwrap div classz-shape2行4列区块/div /div六、高频易错点 只给子元素写 grid-area父容器没定义行列 → span 失效span 行 / 列顺序不要记反先行后列grid 和 flex 不要混用在同一个元素父 grid子才能使用网格相关属性grid-area还有另一种完整写法grid-area: 起始行 / 起始列 / 结束行 / 结束列span是简化写法只需要占用格子数量时优先用。七、一句话区分 Flex vs GridFlex一维只能沿着一条轴排布适合导航、单行列表Grid二维同时管理行 列适合卡片宫格、复杂区块排版题目里的异形区块布局
