[分享]css六边形从中心点旋转

在CSS中制作六边形一般有两种方式，一种是使用伪类伪元素的方式，一种是使用transform的方式。以下介绍使用transform制作的六边形。首先，需要设置一个宽高相等的元素，然后设置背景颜色，将其...

在CSS中制作六边形一般有两种方式，一种是使用伪类伪元素的方式，一种是使用transform的方式。以下介绍使用transform制作的六边形。

首先，需要设置一个宽高相等的元素，然后设置背景颜色，将其变成一个正六边形。接着，在它的伪类里设置再添加一个宽高相等的元素，设置一个边框的宽度，将其变成一个正六边形。这个边框的宽度需要精确计算，具体计算公式可以查看相关资料。

.hexagon {
  width: 100px;
  height: 100px;
  background-color: #888;
  position: relative;
  transform-origin: center;
  transform-style: preserve-3d;
}

.hexagon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 71px;
  height: 71px;
  border: 1px solid #fff;
  margin-left: -36px;
  margin-top: -36px;
  transform: rotate(30deg);
  transform-origin: center;
} 

接下来，就是旋转的步骤了。利用CSS3的transform属性，我们可以很方便地实现旋转效果。在此代码里，我们设置了transform-origin属性，使其旋转的中心点位于六边形的正中心。接着，在鼠标移入六边形的时候，使用:hover伪类并设置transform属性进行旋转。

.hexagon:hover {
  transform: rotate(60deg);
} 

最后，就是整个代码片段了。

.hexagon {
  width: 100px;
  height: 100px;
  background-color: #888;
  position: relative;
  transform-origin: center;
  transform-style: preserve-3d;
}

.hexagon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 71px;
  height: 71px;
  border: 1px solid #fff;
  margin-left: -36px;
  margin-top: -36px;
  transform: rotate(30deg);
  transform-origin: center;
}

.hexagon:hover {
  transform: rotate(60deg);
} 

以上便是关于CSS中六边形从中心点旋转的实现方法。通过简单的CSS代码，可以轻松地实现六边形旋转的效果，同时也可以为网页带来一丝丝的亮点和创意。