css3通过scale()、rotate()实现放大、旋转

CSS3通过scale()、rotate()实现放大、旋转的攻略

在CSS3中，我们可以使用transform属性来实现元素的放大和旋转，其中scale()函数用来缩放元素，rotate()函数用来旋转元素。下面是实现这两个效果的具体攻略。

使用scale()函数实现元素的放大

语法

transform: scale(x, y);

其中x和y表示横向和纵向的缩放比例，取值范围为0到正无穷。当x和y的值小于1时，表示缩小元素；当x和y的值大于1时，表示放大元素；当x和y的值等于1时，表示不缩放。

示例1

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease;
}

.box:hover {
  transform: scale(2);
}

上述代码中，当鼠标悬停在.box元素上时，它会在1秒钟内从原来的大小放大两倍。

示例2

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 1s ease;
}

.box:hover {
  transform: scale(2, 1.5);
}

上述代码中，当鼠标悬停在.box元素上时，它会在1秒钟内横向放大两倍，纵向放大1.5倍。

使用rotate()函数实现元素的旋转

语法

transform: rotate(angle);

其中angle表示旋转的角度，取值范围为-360度到360度。当angle为正值时，表示顺时针旋转元素；当angle为负值时，表示逆时针旋转元素。

示例1

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s ease;
}

.box:hover {
  transform: rotate(180deg);
}

上述代码中，当鼠标悬停在.box元素上时，它会在1秒钟内顺时针旋转180度。

示例2

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: transform 1s ease;
}

.box:hover {
  transform: rotate(-90deg);
}

上述代码中，当鼠标悬停在.box元素上时，它会在1秒钟内逆时针旋转90度。

总结

以上就是使用scale()和rotate()函数实现元素放大和旋转的完整攻略。在实际使用中，我们可以根据需求任意组合这两个函数，实现更加丰富的动画效果。