代码之家 › 专栏 › 技术社区 › shirshamay

并非3D立方体显示的所有侧面

cube 3d css html

shirshamay · 技术社区 · 9 月前

我试图使用CSS创建一个3D立方体,但并不是立方体的所有侧面都能正常显示我的立方体的左侧、右侧和顶部根本不显示仅3D立方体的前部、底部和后部。

我试图改变立方体的大小,我试图改变变换属性和角度,但都不起作用任何帮助都会很棒。这是我的CSS代码,很抱歉它太长了

.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: top right;
}
.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    border: 2px solid white;
    animation: cubeRotate 5s linear infinite;
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
    line-height: 100px;
    text-align: center;
    font-size: 1.4rem;
}
.front {
    background-color: lightblue;
    transform: translateZ(100px);
}
.backward {
    background-color: lightgreen;
    transform: translateZ(-100px);
}
.left {
    background-color: peru;
    transform: rotateY('-90deg') translateZ(-100px);
}
.right {
    background-color: blueviolet;
    transform: rotateY('90deg') translateZ(100px) ;
}
.top {
    background-color: brown;
    transform: rotateX('90deg') translateZ(100px);
}
.bottom {
    background-color: aqua;
    transform: translateZ(100px) rotateX('-90deg');
}
@keyframes cubeRotate {
  from {
    transform: rotateY(0deg) 
}
  to { 
    transform: rotateY(360deg) 
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="cube">
            <div class="face front">Front </div>
                <div class="face left">Left  </div>
                    <div class="face right">Right </div>
                        <div class="face backward">Backward</div>
                        <div class="face top">Top</div>
                        <div class="face bottom">Bottom</div>
        </div>
    </div>
</body>
</html>

1 回复 | 直到 9 月前

Roko C. Buljan 9 月前

不要在rotate函数中使用引号 rotateY('-90deg') 使用 rotateY(-90deg)
而不是先使用 rotate 然后 translate (或者更糟糕的是,混合这两种逻辑),首先: 翻译一张脸,然后旋转它

.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: cubeRotate 5s linear infinite alternate;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.7;
  line-height: 100px;
  text-align: center;
  font-size: 1.4rem;
  /* backface-visibility: hidden; /* uncomment to test all 6 faces */
}

.front {
  background-color: lightblue;
  transform: translateZ(100px) rotateY(0deg);
}

.back {
  background-color: lightgreen;
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  background-color: peru;
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  background-color: blueviolet;
  transform: translateX(100px) rotateY(90deg);
}

.top {
  background-color: brown;
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  background-color: aqua;
  transform: translateY(100px) rotateX(-90deg);
}

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

<div class="container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face left">Left </div>
    <div class="face right">Right </div>
    <div class="face back">Back</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

现在也可以使用以下命令重写上述内容 翻译 和 旋转 不更改轴值的CSS属性:

.container,
.cube,
.face {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size, 200px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}

.container {
  --size: 400px;
  perspective: 800px;
}

.cube {
  --size: 200px;
  animation: cubeRotate 5s linear infinite;
}

.face {
  position: absolute;
  opacity: 0.8;
  font-size: 1.4rem;
  background-color: var(--bg);
}

.front {
  --bg: #0bf;
  translate: 0 0 100px; rotate: 0 0 0 90deg;
}

.back {
  --bg:#fb0;
  translate: 0 0 -100px; rotate: 0 1 0 180deg;
}

.left {
  --bg:#f0b;
  translate: -100px 0 0; rotate: 0 1 0 -90deg;
}

.right {
  --bg:#0fb;
  translate: 100px 0 0; rotate: 0 1 0 90deg;
}

.top {
  --bg:#b0f;
  translate: 0 -100px 0; rotate: 1 0 0 90deg;
}

.bottom {
  --bg:#bf0;
  translate: 0 100px 0; rotate: 1 0 0 -90deg;
}

@keyframes cubeRotate {
  to { rotate: 1 1 1 1turn; }
}

<div class=“容器”>
<div class=“立方体”>
<div class=“正面”>正面</div>
<div class=“面朝左”>左</div>
<div class=“面朝右”>右</div>
<div class=“面朝后”>返回</div>
<div class=“face top”>顶部</div>
<div class=“面朝下”>底部</div>
</div>
</div>