CSS变换

CSS变换允许你对元素进行旋转、缩放、平移、倾斜等操作，从而创建出各种视觉效果。变换不会影响文档流，只会改变元素的视觉呈现。

变换基础

变换通过transform属性实现，它可以接受一个或多个变换函数作为值。

css

.element {
  transform: rotate(45deg) scale(1.5);
}

变换函数

平移 (translate)

将元素从其当前位置移动到指定的位置。

css

/* 水平平移 */
.element {
  transform: translateX(50px);
}

/* 垂直平移 */
.element {
  transform: translateY(50px);
}

/* 水平和垂直平移 */
.element {
  transform: translate(50px, 100px);
}

/* 使用百分比（相对于元素自身尺寸） */
.element {
  transform: translate(50%, 25%);
}

旋转 (rotate)

围绕指定的原点旋转元素。

css

/* 顺时针旋转45度 */
.element {
  transform: rotate(45deg);
}

/* 逆时针旋转45度 */
.element {
  transform: rotate(-45deg);
}

/* 使用弧度 */
.element {
  transform: rotate(1rad);
}

缩放 (scale)

放大或缩小元素。

css

/* 水平和垂直同时缩放 */
.element {
  transform: scale(1.5); /* 放大1.5倍 */
}

/* 仅水平缩放 */
.element {
  transform: scaleX(2); /* 水平放大2倍 */
}

/* 仅垂直缩放 */
.element {
  transform: scaleY(0.5); /* 垂直缩小到原来的0.5倍 */
}

/* 分别指定水平和垂直缩放比例 */
.element {
  transform: scale(2, 0.5);
}

倾斜 (skew)

使元素沿X轴和/或Y轴倾斜。

css

/* 沿X轴倾斜30度 */
.element {
  transform: skewX(30deg);
}

/* 沿Y轴倾斜20度 */
.element {
  transform: skewY(20deg);
}

/* 沿X轴和Y轴同时倾斜 */
.element {
  transform: skew(30deg, 20deg);
}

矩阵变换 (matrix)

使用矩阵函数进行更复杂的变换。

css

.element {
  transform: matrix(a, b, c, d, e, f);
}

矩阵变换允许你同时应用平移、旋转、缩放和倾斜等效果。

3D变换

CSS也支持3D变换，允许你在3D空间中操作元素。

3D旋转

css

/* 绕X轴旋转 */
.element {
  transform: rotateX(45deg);
}

/* 绕Y轴旋转 */
.element {
  transform: rotateY(45deg);
}

/* 绕Z轴旋转（与2D旋转相同） */
.element {
  transform: rotateZ(45deg);
}

/* 绕任意轴旋转 */
.element {
  transform: rotate3d(x, y, z, angle);
}

3D平移

css

/* 沿Z轴平移 */
.element {
  transform: translateZ(50px);
}

/* 3D平移 */
.element {
  transform: translate3d(50px, 100px, 50px);
}

3D缩放

css

/* 3D缩放 */
.element {
  transform: scale3d(1, 1.5, 2);
}

透视 (perspective)

为3D变换创建透视效果，模拟人眼观察物体的方式。

css

.parent {
  perspective: 1000px;
}

.child {
  transform: rotateX(45deg);
}

transform-style

指定元素的子元素是否应使用3D变换。

css

.parent {
  transform-style: preserve-3d;
}

变换原点

使用transform-origin属性可以改变变换的原点。

css

/* 默认原点：center center */
.element {
  transform-origin: center center;
}

/* 左上角原点 */
.element {
  transform-origin: top left;
}

/* 自定义原点（百分比） */
.element {
  transform-origin: 25% 75%;
}

/* 自定义原点（像素） */
.element {
  transform-origin: 50px 100px;
}

变换示例

3D卡片翻转效果

css

.card-container {
  perspective: 1000px;
}

.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

悬浮效果

css

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

浏览器兼容性

CSS变换在现代浏览器中有很好的支持，但需要考虑旧版本浏览器的兼容性：

Chrome 4+ (带-webkit-前缀)
Firefox 3.5+ (带-moz-前缀)
Safari 3.1+ (带-webkit-前缀)
IE 10+
Edge 12+

对于旧版本浏览器的支持，可以添加浏览器前缀：

css

.element {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); /* Safari和Chrome */
  -moz-transform: rotate(45deg); /* Firefox */
  -o-transform: rotate(45deg); /* Opera */
}