超简单-C3实现旋转六边形

    
 
 
 
     *{
  margin: 0;
  padding: 0;
     }
     .kevin{
  width: 174px;
  height: 100px;
  margin: 50px auto;
  position: relative;
  transition: all 1s ease-in-out; 
     }
     .hexagon{
  width: 174px;
  height: 100px;
  background-color: rgba(0,0,0,0.4);
  position: relative;
  left: 0;
  top: 0;
     }
     .hexagon:before{
  content: "";
  display: block;
  width: 174px;
  height: 100px;
  background-color: rgba(0,0,0,0.4);
  transform: rotate(60deg);
  position: absolute;
  left: 0;
  top: 0;
     }
     .hexagon:after{
  content: "";
  display: block;
  width: 174px;
  height: 100px;
  background-color: rgba(0,0,0,0.4);
  transform: rotate(-60deg);
  position: absolute;
  left: 0;
  top: 0;
     }
     .kevin:hover{
  transform: rotate(360deg);
  transition: all .5s ease-in-out; 
     }