[分享]css六边形立体旋转动画

CSS六边形立体旋转动画是一种炫酷的动画效果，可以在网站设计中起到很好的视觉效果。

.hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background-color: #ffc909;
  margin: 27.5px 0;
  display: inline-block;
  transform: rotate(-30deg) skewY(30deg);
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: inherit;
}

.hexagon:before {
  transform: rotate(60deg) skewY(-30deg);
}

.hexagon:after {
  transform: rotate(-60deg) skewY(-30deg);
}

.hexagon.cube {
  transform: rotate(-30deg) skewY(30deg) rotateX(60deg) rotateZ(45deg);
  transition: transform 2s linear;
  transform-style: preserve-3d;
}

.hexagon.cube:before {
  transform: rotate(60deg) skewY(-30deg) rotateX(-60deg) rotateZ(-45deg);
}

.hexagon.cube:after {
  transform: rotate(-60deg) skewY(-30deg) rotateX(-60deg) rotateZ(45deg);
}

.hexagon.cube:hover {
  transform: rotate(-30deg) skewY(30deg) rotateX(60deg) rotateZ(225deg);
} 

这段CSS代码中，有四个主要的类名：hexagon, cube, :before 和 :after。第一个类名hexagon定义了六边形的基本形状和颜色。:before和:after则是伪元素，用来定义六边形的两个“三角形”。

添加cube类名后，六边形便会变成一个立方体。在.hover类名的作用下，鼠标悬浮时，立方体会选择性地旋转。值得注意的是，这个动画效果需要转换为3D空间中的立方体，因此需要使用transform-style:preserve-3d属性。

总体而言，这段CSS代码是一种相对复杂的动画效果，但它可以在网站设计中起到非常好的炫酷效果。