【页面】3D六边形

最新推荐文章于 2024-05-22 18:23:20 发布

*阿漓*

最新推荐文章于 2024-05-22 18:23:20 发布

阅读量877

点赞数 10

分类专栏：笔记 html笔记【前端】css样式文章标签： 3d css css3

本文链接：https://blog.csdn.net/weixin_44481113/article/details/138716940

版权

【前端】css样式同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

笔记

3 篇文章 0 订阅

订阅专栏

html笔记

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!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>

···