纯CSS实现3D立方体

最新推荐文章于 2023-07-10 14:03:36 发布

安和同学

最新推荐文章于 2023-07-10 14:03:36 发布

阅读量220

点赞数

分类专栏：日常小记文章标签： transform translate 3D立方体纯css

本文链接：https://blog.csdn.net/amdd9582/article/details/86646755

版权

日常小记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

废话不多说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>cube</title>
  <style>
    .container {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      margin-top: 200px;
      perspective: 1000px;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: x 10s linear infinite;
    }

    .box>div {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .3;
      box-shadow: 0 0 10px 5px #000;
      line-height: 50px;
      text-align: center;
    }

    .box:nth-of-type(1)>div:nth-of-type(1) {
      background: url(http://zmdd95.com/images/2.jpg) no-repeat;
      background-size: 100% 100%;
      transform: rotate(0deg) translateZ(25px);
    }

    .box:nth-of-type(1)>div:nth-of-type(2) {
      background: red;
      transform: rotateX(180deg) translateZ(25px);
    }

    .box:nth-of-type(1)>div:nth-of-type(3) {
      background: green;
      transform: rotateY(-90deg) translateZ(25px);
    }

    .box:nth-of-type(1)>div:nth-of-type(4) {
      background: blue;
      transform: rotateY(90deg) translateZ(25px);
    }

    .box:nth-of-type(1)>div:nth-of-type(5) {
      background: #f67;
      transform: rotateX(90deg) translateZ(25px);
    }

    .box:nth-of-type(1)>div:nth-of-type(6) {
      background: #f92;
      transform: rotateX(-90deg) translateZ(25px);
    }

    @keyframes x {
      from {
        transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
      }
      to {
        transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </div>
</body>
</html>

安和同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现3D立方体

废话不多说，上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫