使用CSS transition与transform结合可实现平滑动画。transition控制变化速度，transform实现缩放（scale）、旋转（rotate）等效果。通过设置transition: transform 0.3s ease，配合:hover触发，能实现元素悬停时的放大、旋转或复合动画。例如.box:hover { transform: scale(1.3); }实现放大，.icon:hover { transform: rotate(45deg); }实现旋转，.card:hover { transform: scale(1.1) rotate(10deg); }则同时应用缩放与旋转。变换顺序不影响最终效果，但建议先scale后rotate。合理设置transform-origin和缓动函数（如cubic-bezier）可提升动画质感。
使用CSS的transition和transform结合，可以轻松实现平滑的动画效果。其中scale用于缩放元素，rotate用于旋转元素。通过添加过渡属性，可以让这些变换过程变得流畅自然。
基本语法与原理
transition 控制属性变化的速度曲线，常用于:hover等状态切换时产生动画。而 transform 可以对元素进行变形操作，如缩放、旋转、平移等。
将两者结合，就能在用户交互时实现视觉上的动态反馈。
常用写法：
立即学习“前端免费学习笔记（深入）”；
transition: transform 0.3s ease;
transform: scale(1.2) rotate(15deg);
实现缩放（scale）动画
当鼠标悬停时放大按钮或图片，是常见交互效果。
示例代码：
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.3);
}
说明：默认状态下元素大小为原始尺寸，鼠标移入后平滑放大至1.3倍。
Qoder
阿里巴巴推出的AI编程工具
270 查看详情
实现旋转（rotate）动画
图标或徽标常通过旋转增加动感。
示例：让一个正方形在悬停时旋转45度
.icon {
width: 60px;
height: 60px;
background: #e74c3c;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.icon:hover {
transform: rotate(45deg);
}
cubic-bezier函数可自定义缓动效果，使动画更生动。
同时使用 scale 和 rotate
你可以将多个 transform 函数组合使用，实现复合动画。
例如：悬停时既放大又旋转
.card {
width: 120px;
height: 120px;
background: #9b59b6;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.1) rotate(10deg);
}
注意：多个变换函数顺序不影响最终视觉结果，但建议先缩放再旋转，逻辑更清晰。
基本上就这些。只要设置好transition监听transform，再通过伪类或JS触发变化，就能做出顺滑的scale和rotate动画。不复杂但容易忽略细节，比如过渡时间、变换原点（transform-origin）等，可根据需要进一步调整。
以上就是CSS过渡和transform结合使用如何实现动画效果_scale rotate应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/980903.html
微信扫一扫 
支付宝扫一扫 
