css属性transform实现旋转、缩放、平移效果
2020-08-24 11:54:50
CSS的transform属性可通过rotate()、scale()、translate()函数分别实现元素的旋转、缩放和平移效果，且支持组合使用与三维变换，具有不干扰页面布局、性能高效的特点。
一、旋转效果（rotate）- 基本语法：transform: rotate(角度);
角度单位支持deg（度）、rad（弧度）、turn（圈数）。
示例：transform: rotate(45deg);（顺时针旋转45度）。
- 三维旋转：
rotateX()、rotateY()、rotateZ()分别控制元素绕X、Y、Z轴旋转。
示例：transform: rotateX(90deg);（绕X轴旋转90度）。
- 基本语法：transform: scale(sx, sy);
sx为水平缩放倍数，sy为垂直缩放倍数。
若只写一个值（如scale(1.5)），则等比缩放。
示例：
transform: scale(1.5);（放大1.5倍）。
transform: scale(0.5, 2);（水平缩小一半，垂直放大两倍）。
- 单方向缩放：
scaleX()、scaleY()分别控制水平或垂直缩放。
示例：transform: scaleX(0.8);（仅水平方向缩小至80%）。
- 基本语法：transform: translate(tx, ty);
tx为水平位移，ty为垂直位移。若省略ty，默认为0。
示例：
transform: translate(20px, 10px);（向右20px，向下10px）。
transform: translate(-50%, -50%);（常用于居中定位，相对于元素自身宽高计算）。
- 单方向平移：
translateX()、translateY()分别控制水平或垂直位移。
示例：transform: translateY(100px);（仅垂直向下移动100px）。
- 语法规则：多个变换函数用空格分隔，按从左到右的顺序依次应用。
示例：transform: translate(50px, 30px) scale(1.2) rotate(30deg);（先平移，再缩放，最后旋转）。
- 顺序影响结果：
不同顺序可能导致不同效果。例如：
rotate(45deg) translate(20px, 0);（旋转后平移，位移方向基于旋转后的坐标系）。
translate(20px, 0) rotate(45deg);（平移后旋转，位移方向基于原始坐标系）。
建议逻辑顺序：平移 → 旋转 → 缩放（但实际需根据需求调整）。
- 常见效果：
按钮悬停动画（如放大+阴影）。
卡片翻转（结合rotateY()与过渡效果）。
图标微动（如轻微旋转或缩放增强交互感）。
- 性能优势：
变换直接作用于渲染层，不触发重排（reflow），仅重绘（repaint），性能高效。
适合频繁触发的动画（如悬停、滚动效果）。
总结：transform属性通过简洁的函数语法实现丰富的视觉变换，结合过渡（transition）或动画（animation）可创建流畅的交互效果。合理利用其不干扰布局的特性，能显著提升页面性能与用户体验。
热门标签
