LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
@import url(https://fonts.googleapis.com/css?family=Raleway:100);
body {
  background-color: #000;
  overflow: hidden !important;
}
nav {
  width: 100%;
  position: absolute;
  top: 50%;
  height: 360px;
  margin-top: -180px;
  text-align: center;
}
nav a {
  background-color: #222;
  display: block;
  line-height: 90px;
  margin-top: 1px;
  color: #666;
  font-family: 'Raleway';
  font-size: 3em;
  transition: all 300ms ease-out;
  -webkit-transition: all 300ms ease-out;
}
nav a:hover {
  cursor: pointer;
  color: white;
  text-decoration: none;
}
div.content {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 2000px;
  -webkit-perspective: 2000px;
  perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
}
div.content .main-page {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #222;
}
@keyframes rtl {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translateZ(-1800px) rotateY(180deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0px) rotateY(360deg);
  }
}
@-webkit-keyframes rtl {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateZ(-1800px) rotateY(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0px) rotateY(360deg);
  }
}
@keyframes ltr {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translateZ(-1800px) rotateY(-180deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0px) rotateY(-360deg);
  }
}
@-webkit-keyframes ltr {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateZ(-1800px) rotateY(-180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0px) rotateY(-360deg);
  }
}
@keyframes ttb {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translateZ(-1800px) rotateX(180deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0px) rotateX(360deg);
  }
}
@-webkit-keyframes ttb {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateZ(-1800px) rotateX(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0px) rotateX(360deg);
  }
}
@keyframes btt {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translateZ(-1800px) rotateX(-180deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0px) rotateX(-360deg);
  }
}
@-webkit-keyframes btt {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateZ(-1800px) rotateX(-180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0px) rotateX(-360deg);
  }
}
JS
$(document).ready( function() {
    
    var firstClass      = 'rtl';
    var secondClass     = 'ltr';
    var thirdClass      = 'ttb';
    var fourthClass     = 'btt';
    
    var fillMode        = 'forwards';
    var animDuration    = '2s';
    var timingFunction  = 'ease-in-out';
    
    $('.alink').click( function() {
        $('.main-page').css({
            "animation": firstClass + " " + fillMode + " " + animDuration + " " + timingFunction,
            "-webkit-animation": firstClass + " " + fillMode + " " + animDuration + " " + timingFunction
        });
    });
    
    $('.blink').click( function() {
        $('.main-page').css({
            "animation": secondClass + " " + fillMode + " " + animDuration + " " + timingFunction,
            "-webkit-animation": secondClass + " " + fillMode + " " + animDuration + " " + timingFunction
        });
    });
    
    $('.clink').click( function() {
        $('.main-page').css({
            "animation": thirdClass + " " + fillMode + " " + animDuration + " " + timingFunction,
            "-webkit-animation": thirdClass + " " + fillMode + " " + animDuration + " " + timingFunction
        });
    });
    
    $('.dlink').click( function() {
        $('.main-page').css({
            "animation": fourthClass + " " + fillMode + " " + animDuration + " " + timingFunction,
            "-webkit-animation": fourthClass + " " + fillMode + " " + animDuration + " " + timingFunction
        });
    });
    
})
Host Instantly Drag and Drop Website Builder

 

Description

3D page fullscreen animated transition with CSS3 and jQuery.
Term
Mon, 11/27/2017 - 22:07

Related Codes

Pen ID
Pen ID
Pen ID