CSS3转换功能transform主要属性值分析及实现分享

1. 简介

CSS3的transform属性可以实现元素的变换，包括旋转、缩放、移动、斜切等功能。在本文章中，我们将介绍transform的主要属性值及其使用方法，并提供两个具体的示例，帮助读者深入了解该功能。

2. 常用属性值

transform属性共有以下六个常用属性值：

2.1 旋转rotate

rotate可以让元素旋转一定的角度，该属性值为角度值，正值表示元素按顺时针方向旋转，负值表示逆时针旋转。示例如下：

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

.box {
  transform: rotate(45deg);
}

2.2 缩放scale

scale可以让元素缩放一定的比例，该属性值为一个数字或两个数字，其中一个表示水平方向的比例，另一个表示垂直方向的比例。示例如下：

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

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

2.3 移动translate

translate可以让元素沿着指定的方向移动一定的距离，该属性值为一个数字或两个数字，其中一个表示水平方向的距离，另一个表示垂直方向的距离。示例如下：

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

.box {
  transform: translate(100px, 50px);
}

2.4 倾斜skew

skew可以让元素沿着指定的方向倾斜一定的角度，该属性值为角度值，其中一个表示水平方向的角度，另一个表示垂直方向的角度。示例如下：

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

.box {
  transform: skew(30deg, 20deg);
}

2.5 倾斜skewX

skewX可以让元素沿着水平方向倾斜一定的角度，该属性值为角度值。示例如下：

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

.box {
  transform: skewX(30deg);
}

2.6 倾斜skewY

skewY可以让元素沿着垂直方向倾斜一定的角度，该属性值为角度值。示例如下：

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

.box {
  transform: skewY(20deg);
}

3. 实例说明

3.1 圆形图片

我们可以利用transform的scale属性将正方形图片缩放为圆形，示例代码如下：

<div class="box">
  <img src="circle.jpg" alt="">
</div>

.box {
  border-radius: 50%;
  overflow: hidden;
}

.box img {
  width: 100%;
  transform: scale(1);
  transition: transform .3s ease-in-out;
}

.box:hover img {
  transform: scale(1.2);
}

3.2 水波效果

我们可以同时利用transform的scale和rotate属性实现水波效果，示例代码如下：

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

.box {
  display: inline-block;
  font-size: 60px;
  text-align: center;
  padding: 50px;
  border: 1px solid #DDD;
  background: linear-gradient(to bottom, #96CFFF, #FFF);
  color: #333;
  text-shadow: 1px 1px 1px #FFF;
  animation: wave 1s infinite linear;
}

@keyframes wave {
  0% { transform: scale(1); }
  50% { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(-3deg); }
}

4. 总结

通过本文的讲解，我们可以了解到transform的主要属性值及其使用方法。transform功能可以让网站的元素更加的灵活多样，给网站带来更好的视觉效果。