CSS属性transform的常见用法_旋转缩放与位移动画基础

transform属性通过rotate、scale、translate实现旋转、缩放、位移，可组合使用并配合transition或animation创建高性能动画，默认以中心点为变换原点，可通过transform-origin调整。

CSS 的 transform 属性是实现元素视觉变形的核心工具，常用于创建旋转、缩放、位移和倾斜等效果。结合 transition 或 animation，可以轻松实现流畅的动画效果。以下是 transform 常见用法的详细说明。

旋转（rotate）

使用 rotate() 函数可以让元素围绕其中心点进行旋转，单位为度（deg）。

• rotate(45deg)：顺时针旋转45度
• rotate(-90deg)：逆时针旋转90度
• rotate(180deg)：翻转元素

示例：

缩放（scale）

scale() 函数用于改变元素的尺寸大小，接受一个或两个参数（x 和 y 方向）。

立即学习“前端免费学习笔记（深入）”；

• scale(1.5)：在 x 和 y 方向都放大1.5倍
• scale(1.2, 0.8)：水平放大，垂直缩小
• scale(0.5)：整体缩小为原来的一半

常用于鼠标悬停时的放大效果：

讯飞听见

讯飞听见依托科大讯飞的语音识别技术，为用户提供语音转文字、录音转文字等服务，1小时音频最快5分钟出稿，高效安全。

105

查看详情

位移（translate）

translate() 用于移动元素的位置，不会影响其他元素布局。

• translate(20px, 10px)：向右移动20px，向下10px
• translateX(50px)：仅水平移动
• translateY(-30px)：仅垂直上移

适合制作滑入滑出动画或居中定位：

组合变换与动画

多个 transform 函数可组合使用，顺序会影响最终效果。

也可配合 @keyframes 创建复杂动画：

基本上就这些。掌握 transform 的基本函数及其动画应用，能大幅提升页面交互表现力，且性能优于传统布局变动方式。不复杂但容易忽略的是变换原点，默认以中心点（50% 50%）为基准，可通过 transform-origin 调整。

以上就是CSS属性transform的常见用法_旋转缩放与位移动画基础的详细内容，更多请关注php中文网其它相关文章！