2016-08-13 60 views
0

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

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>

回答

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>