现在的网页设计不再是简单的文本和图片堆砌，更注重的是页面的交互效果和用户体验。而在这其中，CSS3旋转成为了一个十分有用的技巧，因为可以在网页中制作各种各样的效果。本文将介绍CSS3旋转技巧，并提供一些例子，让你为页面增色不少。

## 什么是CSS3旋转

CSS3旋转是在网页中应用CSS3的一个技巧，可以使元素顺时针或逆时针旋转固定度数，也可以按照自己的设定任意角度进行旋转，非常灵活多样。CSS3旋转的应用非常广泛，可以制作出良好的特效，如：翻页、展开、模拟立体效果等。

## 如何使用CSS3旋转

首先，需要在CSS样式表中使用transform属性来实现旋转效果。transform属性可以使元素旋转、缩放、扭曲或倾斜。 主要的取值有三种：rotate、scale、skew。

### rotate

rotate取值为角度，可以是正值也可以是负值，可以实现对元素的逆时针或顺时针旋转。

以下代码可以使一张图片逆时针旋转30度：

```css

img {

transform: rotate(-30deg);

}

```

### scale

scale取值为一个小数，可以使元素缩放。

以下代码可以使一张图片放大两倍：

```css

img {

transform: scale(2);

}

```

同时，可以设置两个参数时，第一个为x轴缩放倍数，第二个为y轴缩放倍数，如下代码将使图片在x轴方向放大一倍，在y轴方向缩小一倍：

```css

img {

transform: scale(2, 0.5);

}

```

### skew

skew取值为角度，可以使元素倾斜。

以下代码可以使一张图片向y轴方向倾斜45度：

```css

img {

transform: skewY(45deg);

}

```

如果向x轴方向倾斜，则用skewX()。

## 如何使用CSS3旋转制作特效

### 制作翻转卡牌

翻转卡片是一个非常流行的效果，类似于纸牌翻转的过程。我们可以通过CSS3旋转制作一个类似的效果，方法如下：

首先我们需要一个HTML结构，包含一个外部容器div和两个div子元素，一个用来存放正面内容，一个用来存放背面内容：

```html