Как сделать 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

Вы должны установить translateZ() в transform собственности каждой страницы на половину вашей длины стороны, например, 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>