LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
}

#wrap {
  height: 100%;
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  background: transparent -webkit-linear-gradient(#fff 60%, silver 70%, #567);
  background: transparent linear-gradient(#fff 60%, silver 70%, #567);
}

.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 300px;
  background: transparent url("https://media.giphy.com/media/3o85xEWgPGm7NpQmBy/giphy.gif") no-repeat center center;
  will-change: transform;
  -webkit-transition: -webkit-transform 2s ease;
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.panel:nth-child(1) {
  -webkit-transform: translate3d(-50%, -50%, -40px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -40px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.9;
}
.panel:nth-child(1).active {
  -webkit-transform: translate3d(-50%, -50%, 40px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 40px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(2) {
  -webkit-transform: translate3d(-50%, -50%, -80px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -80px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.8;
}
.panel:nth-child(2).active {
  -webkit-transform: translate3d(-50%, -50%, 80px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 80px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(3) {
  -webkit-transform: translate3d(-50%, -50%, -120px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -120px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.7;
}
.panel:nth-child(3).active {
  -webkit-transform: translate3d(-50%, -50%, 120px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 120px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(4) {
  -webkit-transform: translate3d(-50%, -50%, -160px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -160px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.6;
}
.panel:nth-child(4).active {
  -webkit-transform: translate3d(-50%, -50%, 160px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 160px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(5) {
  -webkit-transform: translate3d(-50%, -50%, -200px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -200px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.5;
}
.panel:nth-child(5).active {
  -webkit-transform: translate3d(-50%, -50%, 200px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 200px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(6) {
  -webkit-transform: translate3d(-50%, -50%, -240px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -240px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.4;
}
.panel:nth-child(6).active {
  -webkit-transform: translate3d(-50%, -50%, 240px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 240px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(7) {
  -webkit-transform: translate3d(-50%, -50%, -280px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -280px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.3;
}
.panel:nth-child(7).active {
  -webkit-transform: translate3d(-50%, -50%, 280px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 280px) rotateX(20deg) rotateY(-40deg);
}
.panel:nth-child(8) {
  -webkit-transform: translate3d(-50%, -50%, -320px) rotateX(-20deg) rotateY(40deg);
          transform: translate3d(-50%, -50%, -320px) rotateX(-20deg) rotateY(40deg);
  opacity: 0.2;
}
.panel:nth-child(8).active {
  -webkit-transform: translate3d(-50%, -50%, 320px) rotateX(20deg) rotateY(-40deg);
          transform: translate3d(-50%, -50%, 320px) rotateX(20deg) rotateY(-40deg);
}
JS
var cards = document.querySelectorAll('.panel');

setInterval(function() {
  for(var i = 0; i < cards.length; i++) {
    cards[i].classList.toggle('active');
  }
}, 3000);

Description

No idea what this is, I just like Scarlet Witch.
Term
Tue, 11/28/2017 - 13:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv