April 10, 2015

Cube resizing 3d

Cube resizing 3d

Another experiment with CSS3. CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat.

We will also use preserve-3d to keep the element 3D and not flat.

HTML

<cube>
  <div class="cube">
      <div class="face x"></div>
      <div class="face y"></div> 
      <div class="face z"></div> 
  </div>
</cube>

CSS

cube {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 400px;
          perspective: 400px;
  height: 100vh;
}

.cube, .face {
  width: 50px;
  height: 50px;
}

.cube {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(45deg) rotate(45deg);
          transform: rotateX(45deg) rotate(45deg);
  -webkit-animation: magic 2s ease-in-out infinite both;
          animation: magic 2s ease-in-out infinite both;
}

@-webkit-keyframes magic {
  20% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(3);
  }
  40% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(3) scaleY(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(3) scaleY(3);
  }
  60% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3);
  }
  80% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3) scaleZ(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3) scaleZ(3);
  }
  90% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(1);
            transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(1);
  }
}

@keyframes magic {
  20% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(3);
  }
  40% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(3) scaleY(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(3) scaleY(3);
  }
  60% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3);
  }
  80% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3) scaleZ(3);
            transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(3) scaleZ(3);
  }
  90% {
    -webkit-transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(1);
            transform: rotateX(45deg) rotate(45deg) scaleX(1) scaleY(1);
  }
}
.face {
  position: absolute;
  width: 50px;
  height: 50px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.face:before, .face:after {
  display: block;
  content: "";
  background-color: inherit;
  position: absolute;
  width: 50px;
  height: 50px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.z {
  background: #D63935;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
}

.x {
  background-color: #24949B;
}
.x:after {
  -webkit-transform: rotateX(90deg) translateZ(25px);
          transform: rotateX(90deg) translateZ(25px);
}
.x:before {
  -webkit-transform: rotateX(90deg) translateZ(-25px);
          transform: rotateX(90deg) translateZ(-25px);
}

.y {
  background-color: #90ee33;
}
.y:after {
  -webkit-transform: rotateY(90deg) translateZ(25px);
          transform: rotateY(90deg) translateZ(25px);
}
.y:before {
  -webkit-transform: rotateY(90deg) translateZ(-25px);
          transform: rotateY(90deg) translateZ(-25px);
}
demo

No comments:

Post a Comment

Popular Posts

Views