使用CSS画一个简单的立方体

作者：System 时间：2024年08月20日分类：所有,css3 字数：1693

要使用CSS创建一个简单的立方体，你可以使用3D转换和CSS3的 transform 属性。以下是一个示例代码，它创建了一个具有不同颜色面的立方体：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .cube {
    width: 100px;
    height: 100px;
    margin: 50px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
 
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #000;
  }
 
  .cube .front {
    background: red;
    transform: translateZ(50px);
  }
 
  .cube .back {
    background: blue;
    transform: translateZ(-50px) rotateY(180deg);
  }
 
  .cube .right {
    background: green;
    transform: translateX(50px) rotateY(90deg);
  }
 
  .cube .left {
    background: orange;
    transform: translateX(-50px) rotateY(-90deg);
  }
 
  .cube .top {
    background: purple;
    transform: translateY(-50px) rotateX(90deg);
  }
 
  .cube .bottom {
    background: yellow;
    transform: translateY(50px) rotateX(-90deg);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="cube">
  <div class="front face"></div>
  <div class="back face"></div>
  <div class="right face"></div>
  <div class="left face"></div>
  <div class="top face"></div>
  <div class="bottom face"></div>
</div>
</body>
</html>

这段代码定义了一个名为 .cube 的容器，它使用 transform-style: preserve-3d; 来确保子元素在3D空间中呈现。每个面 .face 都被绝对定位在 .cube 的中心，并使用 translateZ 和 rotateY 或 rotateX 进行定位和旋转，以创建立方体的视觉效果。动画 @keyframes rotate 使得立方体连续旋转。

使用CSS画一个简单的立方体

评论已关闭

推荐阅读