[分享]css双向旋转里面有六边形

CSS双向旋转是一种前端开发技术，它可以帮助我们实现更加复杂的动画效果。在这篇文章中，我们将介绍如何使用CSS双向旋转来创建一个六边形，让你能够更好地了解CSS双向旋转的使用方法。 .hexagon ...

CSS双向旋转是一种前端开发技术，它可以帮助我们实现更加复杂的动画效果。在这篇文章中，我们将介绍如何使用CSS双向旋转来创建一个六边形，让你能够更好地了解CSS双向旋转的使用方法。

 .hexagon {
    width: 100px;
    height: 55px;
    position: relative;
    margin: 27.5px auto;
    background-color: #6C6;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    animation: rotateHex 5s linear infinite;
  }

  .hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: inherit;
    transform: rotate3d(0, 0, 1, 120deg);
  }

  .hexagon:before {
    transform: rotate3d(0, 0, 1, 60deg);
  }

  .hexagon:after {
    transform: rotate3d(0, 0, 1, 240deg);
  }

  @keyframes rotateHex {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
  } 

首先，我们创建一个大小为100x55px的六边形，并且把它的位置设置为相对定位relative。然后，我们设置它的背景颜色为#6C6，并且使用CSS双向旋转的preserve-3d属性让它具有立体感。我们使用transform-origin属性来指定旋转的中心点，这里设置的是50% 50%。我们使用animation属性来控制六边形的旋转动画，rotateHex为旋转动画的名称，后面的参数用于设置动画的时间、速度和循环次数。

接下来，我们使用:before和:after伪元素来分别创建两个三角形，组成了六边形。我们使用rotate3d属性来旋转这两个三角形，通过调整旋转角度（120deg、60deg、240deg）来确保它们的角度和位置正确。最后，我们使用@keyframes来创建旋转动画rotateHex，在起始帧和结束帧之间切换六边形的旋转状态。

这样，我们就成功地创建了一个六边形，并且通过CSS双向旋转和旋转动画，让它拥有了更加生动、立体的效果。希望你喜欢本文介绍的方法，并能够在实际的开发工作中灵活运用CSS双向旋转技术。