CSS3 2D转换 - 移动、旋转与缩放元素

最后编辑于2025-04-14 12:09:11.005988 +0800 CST

CSS3 2D 转换

CSS3转换允许你对HTML元素进行移动、旋转、缩放和倾斜等操作，从而创建更加丰富的视觉效果。

浏览器支持

属性 Chrome IE Firefox Safari Opera
transform 4.0
1.0 -webkit-		 9.0 3.5
3.5 -moz-		 3.1
3.1 -webkit-		 10.5

CSS3 2D转换方法

CSS3 2D转换通过transform属性实现，支持以下转换方法：

  • translate() - 移动元素
  • rotate() - 旋转元素
  • scale() - 缩放元素
  • skew() - 倾斜元素
  • matrix() - 组合多种转换

translate() 方法

translate()方法将元素从当前位置移动，根据给定的 left（X坐标）和 top（Y坐标）位置参数。

css 
1div {
2    transform: translate(50px, 100px);
3    -ms-transform: translate(50px, 100px); /* IE 9 */
4    -webkit-transform: translate(50px, 100px); /* Safari and Chrome */
5}

这会把元素从左边移动50像素，从上面移动100像素。

你也可以只指定一个值，表示水平方向的移动：

css 
1div {
2    transform: translate(50px);
3}

还可以单独使用translateX()和translateY()方法：

css 
1div {
2    transform: translateX(30px) translateY(5px);
3}

rotate() 方法

rotate()方法用于顺时针旋转元素，负值为逆时针旋转。

css 
1div {
2    transform: rotate(20deg);
3    -ms-transform: rotate(20deg); /* IE 9 */
4    -webkit-transform: rotate(20deg); /* Safari and Chrome */
5}

上面的例子将元素顺时针旋转20度。

scale() 方法

scale()方法用于调整元素的大小，可以放大或缩小。

css 
1div {
2    transform: scale(2, 3);
3    -ms-transform: scale(2, 3); /* IE 9 */
4    -webkit-transform: scale(2, 3); /* Safari and Chrome */
5}

上面的例子把宽度转换为原始尺寸的2倍，把高度转换为原始高度的3倍。

如果只指定一个值，则宽度和高度同时调整：

css 
1div {
2    transform: scale(2); /* 宽高都变为原来的2倍 */
3}

还可以单独使用scaleX()和scaleY()方法：

css 
1div {
2    transform: scaleX(2) scaleY(3);
3}

skew() 方法

skew()方法用于沿X和Y轴倾斜元素。

css 
1div {
2    transform: skew(30deg, 20deg);
3    -ms-transform: skew(30deg, 20deg); /* IE 9 */
4    -webkit-transform: skew(30deg, 20deg); /* Safari and Chrome */
5}

上面的例子将元素沿X轴倾斜30度，沿Y轴倾斜20度。

如果只指定一个值，则表示只沿X轴倾斜：

css 
1div {
2    transform: skew(30deg);
3}

还可以单独使用skewX()和skewY()方法：

css 
1div {
2    transform: skewX(30deg) skewY(20deg);
3}

matrix() 方法

matrix()方法能够组合所有2D转换方法，它需要六个参数，包含数学函数，用于旋转、缩放、移动以及倾斜元素。

css 
1div {
2    transform: matrix(1, -0.3, 0, 1, 0, 0);
3    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
4    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari and Chrome */
5}

组合转换

可以在一个transform属性中组合多个转换方法：

css 
1div {
2    transform: translate(50px, 50px) rotate(45deg) scale(1.5);
3}

上面的例子先将元素移动，然后旋转，最后缩放。注意：转换的顺序很重要，不同的顺序会产生不同的效果。

transform-origin 属性

transform-origin属性允许你改变被转换元素的位置（原点）。

2D转换元素的默认原点是元素的中心(50%, 50%)，你可以使用transform-origin属性改变这一点。

css 
1div {
2    transform: rotate(45deg);
3    transform-origin: 20% 40%; /* 从元素的20%宽度和40%高度处开始转换 */
4}

实际应用示例

1. 创建悬停时旋转的图标

css 
1.rotate-icon {
2    transition: transform 0.3s ease;
3}
4
5.rotate-icon:hover {
6    transform: rotate(90deg);
7}

2. 制作缩放效果的卡片

css 
1.card {
2    transition: transform 0.3s;
3}
4
5.card:hover {
6    transform: scale(1.05);
7    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
8}

3. 倾斜的徽章或标签

css 
 1.badge {
 2    background: red;
 3    color: white;
 4    padding: 5px 10px;
 5    transform: skew(-10deg);
 6}
 7
 8.badge span {
 9    display: inline-block;
10    transform: skew(10deg); /* 使文字保持不倾斜 */
11}

CSS3 2D转换属性总结

属性 描述
transform 向元素应用2D或3D转换
transform-origin 允许改变被转换元素的位置