简单使用 CSS 画一个正方体_css 画一个正方形-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49216561/article/details/128410313

这篇博客介绍了如何利用CSS3的3D变换特性，通过位移属性translateZ和旋转属性rotateX、rotateY来绘制一个正方体。通过设置transform-style: preserve-3d确保子元素呈现立体效果。

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

使用CSS3的3D变换

位移属性 translateZ( ) 和旋转属性 rotateX( ) / rotateY( )；

使子元素立体呈现：transform-style: preserve-3d; 方便预览效果。

<!DOCTYPE html>
<html>
  <head>
  <title>test</title>
  <style> 
    .wrapper{ 
      width: 50%; 
      float: left; 
    } 
    .cube{ 
      font-size: 4em; 
      width: 2em; 
      margin: 1.5em auto; 
      transform-style: preserve-3d; 
      transform: rotateX(-35deg) rotateY(30deg); 
    } 
    .side{ 
      position: absolute; 
      width: 2em; 
      height: 2em; 
      background: rgba(255,99,71,0.6); 
      border: 1px solid rgba(0,0,0,0.5); 
      color: white; 
      text-align: center; 
      line-height: 2em; 
    } 
    .front{ 
      transform: translateZ(1em); 
    } 
    .bottom{ 
      transform: rotateX(-90deg) translateZ(1em); 
    } 
    .top{ 
      transform: rotateX(90deg) translateZ(1em); 
    } 
    .left{ 
      transform: rotateY(-90deg) translateZ(1em); 
    } 
    .right{ 
      transform: rotateY(90deg) translateZ(1em); 
    } 
    .back{ 
      transform: translateZ(-1em); 
    } 
  </style>
</head>
<body>
<div class="wrapper"> 
  <div class="cube"> 
    <div class="side front">1</div> 
    <div class="side back">6</div> 
    <div class="side right">4</div> 
    <div class="side left">3</div> 
    <div class="side top">5</div> 
    <div class="side bottom">2</div> 
  </div> 
</div> 
</body>
</html>

效果如下：