samedi 13 août 2016

How to make 3D div bigger?

I have a 3D cube div, http://ift.tt/2aJIyOk , 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: http://ift.tt/2bfd9jp

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>



Aucun commentaire:

Enregistrer un commentaire