A Pen by Robert Bue.

3D-page-flip.markdown

3D page flip

Test for a page transition on a new site. New version with support for IE: http://codepen.io/robbue/pen/tnLmH/

A Pen by Robert Bue on CodePen.

License.

index.html

<div class="site">
  <div class="container">
    <div class="page-content"><p><strong>3D</strong> Page Flip</p></div>
    <div class="page-content" id="new-content"><p><strong>3D</strong> Page Flip</p></div>
  </div>
</div>
<!--
New version with support for IE: http://codepen.io/robbue/pen/tnLmH/
-->

script.js

var siteW = $(window).width();
var siteH = $(window).height();

$("p").css({ lineHeight: siteH + 'px' }); // dirty dirty

TweenMax.set(".site", { perspective: 5000 });
TweenMax.set(".container", { transformStyle: "preserve-3d",  transformOrigin: '-0% 50%' });
TweenMax.set("#new-content", { rotationY: 90, z: -siteW/2, x: siteW/2 });

var tlFlip = new TimelineMax({ yoyo: true, repeat: -1, delay: 1.5, repeatDelay: 2 });

tlFlip
.to('.site', .5, { scale: 0.8, ease: Power2.easeInOut }, "start")
.to('.container', .4, { rotationY: -90, z: -siteW, ease: Power2.easeInOut }, "start+=0.7")
.to('.site', .5, { scale: 1, ease: Power2.easeInOut }, "start+=1.2");

style.css

html, body {
   height: 100%;
  background: #333;
}

.site {
    height: 100%;
}

.container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  
  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
}

.page-content {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #1abc9c;
}

#new-content {
  background: #f1c40f;
  z-index: 1;
}

.page-content p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 75px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  margin: 0;
}

#new-content p {
  color: #010101;
}

.page-content p strong {
  font-weight: 700;
}