h5自旋转六面体

最新推荐文章于 2024-07-09 18:45:02 发布

hzy1216

最新推荐文章于 2024-07-09 18:45:02 发布

阅读量105

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/hzy1216/article/details/134623404

版权

css代码

* {
        margin: 0;
        padding: 0;
      }
      ul li {
        list-style: none;
      }
      .stage {
        width: 800px;
        height: 600px;
        background: #eee;
        margin: 50px auto;
        position: relative;
        perspective: 1200px;
      }
      .lmt {
        width: 400px;
        height: 400px;
        border: 1px #000 solid;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform-style: preserve-3d;
        animation: xuanzhuan 5s linear infinite alternate;
      }
      .lmt li {
        width: 400px;
        height: 400px;
        font-size: 72px;
        text-align: center;
        line-height: 400px;
        position: absolute;
      }
      .lmt li:nth-child(1) {
        background: rgba(255, 0, 0, 0.5);
        transform: translateZ(200px);
      }
      .lmt li:nth-child(2) {
        background: rgba(0, 255, 0, 0.5);
        transform: translateZ(-200px) rotateY(180deg);
      }
      .lmt li:nth-child(3) {
        background: rgba(0, 0, 255, 0.5);
        transform: translateX(-200px) rotateY(-90deg);
      }
      .lmt li:nth-child(4) {
        background: rgba(255, 255, 0, 0.5);
        transform: translateX(200px) rotateY(90deg);
      }
      .lmt li:nth-child(5) {
        background: rgba(255, 0, 255, 0.5);
        transform: translateY(-200px) rotateX(90deg);
      }
      .lmt li:nth-child(6) {
        background: rgba(0, 255, 255, 0.5);
        transform: translateY(200px) rotateX(-90deg);
      }

      @keyframes xuanzhuan {
        from {
          transform: rotateX(0) rotateY(0);
        }
        to {
          transform: rotateX(360deg) rotateY(360deg);
        }
      }

html代码

 <div class="stage">
      <ul class="lmt">
        <li>前</li>
        <li>后</li>
        <li>左</li>
        <li>右</li>
        <li>上</li>
        <li>下</li>
      </ul>
    </div>