使用 rotate() 和 scale() 可实现元素旋转与缩放，rotate(45deg) 顺时针旋转，负值逆时针，scale(1.5) 放大，scale(2, 0.5) 控制XY轴独立缩放，transform 可组合多个函数如 rotate(30deg) scale(1.2)，执行顺序从右到左，transform-origin 可修改变换中心点，默认为元素中心，常配合 transition 实现高性能动画效果。
CSS 的 transform 属性可以轻松实现元素的旋转、缩放、平移和倾斜等视觉效果。要实现旋转与缩放，主要使用 rotate() 和 scale() 函数。
元素旋转（rotate）
使用 rotate() 可以让元素围绕其中心点进行旋转，单位是度（deg）。
说明：transform: rotate(45deg); 表示顺时针旋转45度。 负值为逆时针旋转，如 rotate(-30deg)。 旋转基于元素的中心点（可配合 transform-origin 修改）。示例：
.box { transform: rotate(45deg);}
元素缩放（scale）
使用 scale() 可以改变元素的大小。
说明：scale(1.5) 表示在 X 和 Y 轴同时放大到 1.5 倍。 scale(2, 0.5) 第一个参数控制水平方向（X轴），第二个控制垂直方向（Y轴）。 值小于 1 表示缩小，大于 1 表示放大，等于 1 为原始大小。示例：
.box { transform: scale(1.2, 0.8);}
同时旋转与缩放
可以在 transform 中组合多个函数，实现复合变换。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
立即学习“前端免费学习笔记（深入）”；
注意：多个变换函数用空格分隔。 执行顺序从右往左（实际渲染顺序会影响结果）。示例：
.box { transform: rotate(30deg) scale(1.2);}
先缩放再旋转（书写顺序影响最终表现）。
调整变换原点
默认变换以元素中心为基准点，可通过 transform-origin 修改。
常见设置：transform-origin: top left; transform-origin: 50% 50%;（等同于 center） transform-origin: right bottom;示例：
.box { transform: rotate(45deg); transform-origin: top left;}
基本上就这些。合理使用 transform 能提升界面动效表现力，且性能较好，适合结合 transition 实现平滑动画。
以上就是css transform属性如何实现元素旋转与缩放的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030680.html
微信扫一扫 
支付宝扫一扫 
