<!DOCTYPE html>
<html>
<head><title>3D正六边形</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {perspective: 1000px;}.hexagon {width: 200px;height: 200px;position: relative;transform-style: preserve-3d; animation: rotate 15s infinite linear;}.hexagon-face {position: absolute;width: 200px;height: 200px;background-color: transparent;border: 1px solid #ccc;overflow: hidden;}.hexagon:hover{animation-play-state:paused;} .hexagon-face:nth-child(1) {background-color: aliceblue;transform:rotateY(0) translateZ(200px);}.hexagon-face:nth-child(2) {background-color: rgb(167, 186, 202);transform: rotateY(60deg) translateZ(200px);}.hexagon-face:nth-child(3) {background-color: rgb(148, 179, 76);transform: rotateY(120deg) translateZ(200px);}.hexagon-face:nth-child(4) {background-color: rgb(23, 71, 113);transform: rotateY(180deg) translateZ(200px);}.hexagon-face:nth-child(5) {background-color: rgb(186, 51, 20);transform: rotateY(240deg) translateZ(200px);}.hexagon-face:nth-child(6) {background-color: rgba(220, 60, 202, 0.763);transform: rotateY(300deg) translateZ(200px);}@keyframes rotate {0% {transform: rotateY(405deg);}100% {transform: rotateY(45deg);}}</style>
</head>
<body><div class="container"><div class="hexagon"><div class="hexagon-face"><div class="image-container">1</div></div><div class="hexagon-face"><div class="image-container">2 </div></div><div class="hexagon-face"><div class="image-container">3</div></div><div class="hexagon-face"><div class="image-container">4</div></div><div class="hexagon-face"><div class="image-container">5</div></div><div class="hexagon-face"><div class="image-container">6</div></div></div></div>
</body>
</html>···
