css属性transform实现旋转、缩放、平移效果

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（圈数）。

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

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()单独控制某一方向。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

平移（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实现旋转、缩放、平移效果的详细内容，更多请关注php中文网其它相关文章！