如何用 css 画一个正方体

最新推荐文章于 2024-02-22 15:54:12 发布

兰亭古墨

最新推荐文章于 2024-02-22 15:54:12 发布

阅读量769

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/hefeng6500/article/details/125506378

版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

这篇博客通过一段HTML和CSS3代码展示了如何创建一个3D翻转的立方体效果。利用`transform-style: preserve-3d`和`rotate3d()`函数，实现了立方体六个面的动态旋转，提供了四种不同的旋转样式供用户点击切换。此示例适用于前端开发者学习和理解CSS3的3D变换特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
懒得写思路了，直接看代码吧

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 380px;
        height: 320px;
        position: relative;
        background: linear-gradient(skyblue, khaki);
        perspective: 550px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #example-element {
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;
        transition: all 0.3s ease-in;
      }
      .face {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: inherit;
        font-size: 60px;
        color: #fff;
      }

      .front {
        background-color: rgba(90, 90, 90, 0.7);
        transform: translateZ(50px);
      }
      .back {
        background-color: rgba(0, 210, 0, 0.7);
        transform: rotateY(180deg) translateZ(50px);
      }
      .right {
        background-color: rgba(210, 0, 0, 0.7);
        transform: rotateY(90deg) translateZ(50px);
      }
      .left {
        background-color: rgba(0, 0, 210, 0.7);
        transform: rotateY(-90deg) translateZ(50px);
      }
      .top {
        background-color: rgba(210, 210, 0, 0.7);
        transform: rotateX(90deg) translateZ(50px);
      }
      .bottom {
        background-color: rgba(210, 0, 210, 0.7);
        transform: rotateX(-90deg) translateZ(50px);
      }

      .btn {
        height: 20px;
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="example-element" class="transition-all">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>

    <div>
      <button id="test01" class="btn">transform: rotate3d(0);</button>
      <button id="test02" class="btn">transform: rotate3d(1, 1, 1, 45deg);</button>
      <button id="test03" class="btn">
        transform: rotate3d(2, -1, -1, -0.2turn);
      </button>
      <button id="test04" class="btn">
        transform: rotate3d(0, 1, 0.5, 3.142rad);
      </button>
    </div>

    <script>
      const ele = document.getElementById("example-element");

      test01.onclick = function () {
        ele.style.transform = "";
      };
      test02.onclick = function () {
        ele.style.transform = "rotate3d(1, 1, 1, 45deg)";
      };
      test03.onclick = function () {
        ele.style.transform = "rotate3d(2, -1, -1, -0.2turn)";
      };
      test04.onclick = function () {
        ele.style.transform = "rotate3d(0, 1, 0.5, 3.142rad)";
      };
    </script>
  </body>
</html>