transform属性通过rotate、scale、translate实现旋转、缩放、位移，可组合使用并配合transition或animation创建高性能动画，默认以中心点为变换原点，可通过transform-origin调整。
CSS 的 transform 属性是实现元素视觉变形的核心工具，常用于创建旋转、缩放、位移和倾斜等效果。结合 transition 或 animation，可以轻松实现流畅的动画效果。以下是 transform 常见用法的详细说明。
旋转（rotate）
使用 rotate() 函数可以让元素围绕其中心点进行旋转，单位为度（deg）。
rotate(45deg)：顺时针旋转45度 rotate(-90deg)：逆时针旋转90度 rotate(180deg)：翻转元素
示例：
.element {
transform: rotate(45deg);
}
缩放（scale）
scale() 函数用于改变元素的尺寸大小，接受一个或两个参数（x 和 y 方向）。
立即学习“前端免费学习笔记（深入）”；
scale(1.5)：在 x 和 y 方向都放大1.5倍 scale(1.2, 0.8)：水平放大，垂直缩小 scale(0.5)：整体缩小为原来的一半
常用于鼠标悬停时的放大效果：
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 .element:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}
位移（translate）
translate() 用于移动元素的位置，不会影响其他元素布局。
translate(20px, 10px)：向右移动20px，向下10px translateX(50px)：仅水平移动 translateY(-30px)：仅垂直上移
适合制作滑入滑出动画或居中定位：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
组合变换与动画
多个 transform 函数可组合使用，顺序会影响最终效果。
.animated-box {
transform: translateX(100px) rotate(45deg) scale(1.2);
transition: transform 0.5s ease-in-out;
}
.animated-box:hover {
transform: translateX(0) rotate(0) scale(1);
}
也可配合 @keyframes 创建复杂动画：
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
基本上就这些。掌握 transform 的基本函数及其动画应用，能大幅提升页面交互表现力，且性能优于传统布局变动方式。不复杂但容易忽略的是变换原点，默认以中心点（50% 50%）为基准，可通过 transform-origin 调整。
以上就是CSS属性transform的常见用法_旋转缩放与位移动画基础的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/993747.html
微信扫一扫 
支付宝扫一扫 
