transform属性可实现元素旋转、缩放和平移。rotate()用于旋转，如rotate(45deg)；scale()调整大小，如scale(1.5)；translate()移动位置，如translate(20px, 10px)；支持三维变换及组合使用，如transform: translate(50px, 30px) scale(1.2) rotate(30deg)，常用于动画与交互效果。
使用CSS的transform属性可以轻松实现元素的旋转、缩放和平移效果。这个属性不会影响页面布局，而是直接在渲染层面对元素进行视觉变换。
旋转（rotate）
通过rotate()函数可以让元素围绕其中心点旋转指定角度。
语法： transform: rotate(角度);
角度单位可以是deg（度）、rad（弧度）或turn（圈数）。
立即学习“前端免费学习笔记（深入）”；
例如：将一个盒子顺时针旋转45度
transform: rotate(45deg);
也可以使用rotateX()、rotateY()、rotateZ()分别控制在三维空间中的轴向旋转。
缩放（scale）
scale()用于改变元素的尺寸大小。
语法： transform: scale(sx, sy);
sx表示水平方向缩放倍数，sy表示垂直方向缩放倍数。如果只写一个值，则两个方向等比缩放。
示例：transform: scale(1.5); —— 放大到原大小的1.5倍 transform: scale(0.5, 2); —— 水平缩小一半，垂直拉长两倍
同样支持scaleX()和scaleY()单独控制某一方向。
稿定抠图
AI自动消除图片背景
76 查看详情
平移（translate）
translate()用来移动元素的位置，相对于其自身原始位置进行偏移。
语法： transform: translate(tx, ty);
tx为水平位移，ty为垂直位移。若省略ty，默认为0。
常见用法：transform: translate(20px, 10px); —— 向右20px，向下10px transform: translate(-50%, -50%); —— 常用于居中定位
也可使用translateX()或translateY()单独设置单方向偏移。
组合变换
多个变换效果可以用空格分隔写在同一行中。
示例： 同时旋转、缩放并平移元素
transform: translate(50px, 30px) scale(1.2) rotate(30deg);
注意：变换顺序会影响最终效果，建议按“平移 → 旋转 → 缩放”逻辑思考，但实际执行是从左到右依次应用。
基本上就这些。灵活运用transform能实现丰富的视觉交互效果，比如按钮悬停动画、卡片翻转、图标微动等，且性能良好，推荐优先使用。
以上就是css属性transform实现旋转、缩放、平移效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022892.html
微信扫一扫 
支付宝扫一扫 
