[分享]css3多边形旋转教程

CSS3拥有很多强大的样式属性，其中一个是可以创建多边形的属性，而通过变换属性又可以将多边形进行旋转。接下来我们就来看看如何通过CSS3来创建多边形并将其旋转。首先需要用到的是CSS3的clippat...

CSS3拥有很多强大的样式属性，其中一个是可以创建多边形的属性，而通过变换属性又可以将多边形进行旋转。接下来我们就来看看如何通过CSS3来创建多边形并将其旋转。

首先需要用到的是CSS3的clip-path属性来创建多边形。通过clip-path属性可以将一个元素剪切成任何一种多边形。下面是一个创建六边形的示例：

.hexagon {
  width: 200px;
  height: 200px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color: #ff5722;
} 

上面的代码中，我们设置了一个宽高为200px的元素，并使用了clip-path属性，通过polygon函数设置了六个点，从而创建了一个六边形。

接下来要进行旋转变换。我们可以使用CSS3的transform属性来实现旋转变换。下面的代码可以将六边形以中心点进行旋转45度：

.hexagon {
  /* 之前的代码省略 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
} 

在上面的代码中，我们使用了transform属性来旋转元素，旋转的角度为45度，通过加上浏览器前缀可以兼容各种浏览器。

最终的效果如下：

通过以上的代码，我们可以简单的利用clip-path属性和transform属性来创建多边形并进行旋转。对于想要进行更复杂的样式变换的开发者来说，CSS3提供的样式属性是非常强大的。