CSS `transform` 属性详解：打造视觉结果与动画的利器

弁言

在当代网页操持中，视觉结果和动画是提升用户体验的告急本领。CSS 的 transform 属性是实现这些结果的有力工具。本文将深入分析 transform 属性的各个方面，资助你把握其使用方法，创建出丰富多彩的视觉结果和动画。
一、transform 属性简介

transform 是 CSS 中一个非常强盛的属性，用于对元素举行二维或三维的变更。它可以资助你实现平移、旋转、缩放、倾斜等结果，从而创建出各种视觉结果和动画。
二、平移（Translation）

用途：将元素在页面上程度或垂直移动。
示例：

1. .element {
2.    
3.    
4.   transform: translateX(20px); /* 水平向右移动20px */
5.   transform: translateY(30px); /* 垂直向下移动30px */
6.   transform: translate(20px, 30px); /* 水平向右20px，垂直向下30px */
7. }

复制代码

结果：元素在页面上移动，但不会改变其在文档流中的位置。
三、旋转（Rotation）

用途：围绕一个点旋转元素。
示例：

1. .element {
2.    
3.    
4.   transform: rotate(45deg); /* 顺时针旋转45度 */
5.   

复制代码