[分享]css六边形划过翻转

六边形在网页设计中是比较常用的形状之一，而翻转效果也是增添动态感的一种方式。在css中，我们可以通过transform属性和hover伪类来实现六边形的划过翻转效果。首先，我们需要先定义一个六边形的d...

六边形在网页设计中是比较常用的形状之一，而翻转效果也是增添动态感的一种方式。在css中，我们可以通过transform属性和hover伪类来实现六边形的划过翻转效果。

首先，我们需要先定义一个六边形的div元素，并利用border和伪类来设置六边形的样式：

.hexagon {
  position: relative;
  width: 100px;
  height: 57.74px;
  margin: 28.87px 0;
  background-color: #6C6;
  opacity: 0.8;
  transform: rotate(120deg);
  float: left;
  margin-right: 1.732em;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 28.87px solid #6C6;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #6C6;
} 

接下来，我们利用transform属性来实现翻转效果，在hover伪类中设置transform为rotateX(180deg)：

.hexagon:hover {
  transform: rotate(120deg) rotateX(180deg);
} 

这样，当我们鼠标划过这个六边形时，就会出现一个划过翻转的效果。

完整的代码如下：

<div class="hexagon"></div>

.hexagon {
  position: relative;
  width: 100px;
  height: 57.74px;
  margin: 28.87px 0;
  background-color: #6C6;
  opacity: 0.8;
  transform: rotate(120deg);
  float: left;
  margin-right: 1.732em;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 28.87px solid #6C6;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #6C6;
}

.hexagon:hover {
  transform: rotate(120deg) rotateX(180deg);
}