如何让3D div更大？

Question

我有一个3D cube div，在CSS 200px x 200px中，但是当我尝试使它更大时，只显示一面。我试图让所有方面的宽度和高度相同，但其他方面仍然没有表现出来。 下面是立方体的样子

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    perspective: 800; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: #010101; 
 
} 
 
.cube { 
 
    position: relative; 
 
    top: 160px; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 200px; 
 
    animation: spin 9s infinite linear; 
 
    transform-style: preserve-3d; 
 
    opacity: .8; 
 
} 
 
@keyframes spin { 
 
    from { 
 
    transform: rotateY(0) rotateX(0); 
 
    } 
 
    to { 
 
    transform: rotateY(-360deg) rotateX(360deg); 
 
    } 
 
} 
 
.cube > div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.one { 
 
    transform: rotateX(90deg) translateZ(100px); 
 
    background-color: #E349BB; 
 
} 
 
.two { 
 
    transform: translateZ(100px); 
 
    background-color: #BB493E; 
 
} 
 
.three { 
 
    transform: rotateY(90deg) translateZ(100px); 
 
    background-color: #f00de7; 
 
} 
 
.four { 
 
    transform: rotateY(180deg) translateZ(100px); 
 
    background-color: #dec011; 
 
} 
 
.five { 
 
    transform: rotateY(-90deg) translateZ(100px); 
 
    background-color: #bac35d; 
 
} 
 
.six { 
 
    transform: rotateX(-90deg) translateZ(100px); 
 
    background-color: #E349BB; 
 
} 
 
h1, 
 
p { 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="cube"> 
 
    <div class="one"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="two"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="three"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="four"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="five"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="six"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 1

你必须设置每一页的transform财产translateZ()你的边长，例如半translateZ(150px)，长度为300px。这是6个侧面到中心的距离。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    perspective: 800; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: #010101; 
 
} 
 
.cube { 
 
    position: relative; 
 
    top: 160px; 
 
    margin: 0 auto; 
 
    height: 300px; 
 
    width: 300px; 
 
    animation: spin 9s infinite linear; 
 
    transform-style: preserve-3d; 
 
    opacity: .8; 
 
} 
 
@keyframes spin { 
 
    from { 
 
    transform: rotateY(0) rotateX(0); 
 
    } 
 
    to { 
 
    transform: rotateY(-360deg) rotateX(360deg); 
 
    } 
 
} 
 
.cube > div { 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
.one { 
 
    transform: rotateX(90deg) translateZ(150px); 
 
    background-color: #E349BB; 
 
} 
 
.two { 
 
    transform: translateZ(150px); 
 
    background-color: #BB493E; 
 
} 
 
.three { 
 
    transform: rotateY(90deg) translateZ(150px); 
 
    background-color: #f00de7; 
 
} 
 
.four { 
 
    transform: rotateY(180deg) translateZ(150px); 
 
    background-color: #dec011; 
 
} 
 
.five { 
 
    transform: rotateY(-90deg) translateZ(150px); 
 
    background-color: #bac35d; 
 
} 
 
.six { 
 
    transform: rotateX(-90deg) translateZ(150px); 
 
    background-color: #E349BB; 
 
} 
 
h1, 
 
p { 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="cube"> 
 
    <div class="one"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="two"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="three"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="four"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="five"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 
    <div class="six"> 
 
     <h1>Arun Pattni</h1> 
 
     <p>Coder: 
 
     <br>Web Design 
 
     <br>Web Development 
 
     <br>Java 
 
     <br>Mobile Web Apps</p> 
 
    </div> 
 

 
    </div> 
 

 
</div>