Arun P Arun P - 2 months ago 18
CSS Question

How to make 3D div bigger?

I have a 3D cube div, https://codepen.io/ApCoder123/pen/kXVBky , in CSS 200px x 200px, but when I try to make it bigger, the sides are too big for each other, even with the same width and height. I have tried to change almost everything, but still can't figure it out
Link to what freaked out looks like: https://codepen.io/ApCoder123/pen/dXavVw



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

You have to set translateZ() of the transform property of each page to a half of your side length, e.g. translateZ(150px) for a side length of 300px. It's the distance of the 6 side planes to the center.

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>