3D divをもっと大きくするには？

Question

CSS 200px x 200pxには3D cube divがありますが、それを大きくすると片面のみが表示されます。私はすべての辺を同じ幅と高さにしようとしましたが、他の辺はまだ表示されませんでした。以下 はキューブが

あなたは、例えば、あなたの側の長さの半分に各ページの transform財産の translateZ()を設定する必要が

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

次のようになります側面長さが300pxの場合はtranslateZ(150px)です。 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>