JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="viewport">
    <div class="glass-pane position-main">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="back"></div>
        <div class="front">
            <iframe src="http://mit.edu"></iframe>
            <div class="cover"></div>
        </div>
    </div>

    <div class="glass-pane position-off-left">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="back"></div>
        <div class="front">
            <iframe src="http://mit.edu/news"></iframe>
            <div class="cover"></div>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

body {
    background: #2e2e2e;
}

.viewport {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 700;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.glass-pane {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: transparent;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.4s;
    -webkit-transform: scale(1);
    opacity: 0;
}

.glass-pane > div {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: visible;
}

.glass-pane .top {
   height: 40px;
   -webkit-transform: rotateX(90deg) translateY(-20px) translateZ(20px);
}

.glass-pane .bottom {
   bottom: 0;
   top: auto;
   height: 40px;
   -webkit-transform: rotateX(90deg) translateY(-20px) translateZ(-20px);
}

.glass-pane .left {
   width: 40px;
   -webkit-transform: rotateY(90deg) translateX(20px) translateZ(-20px);
}

.glass-pane .right {
    left: auto;
    right: 0;
    width: 40px;
    -webkit-transform: rotateY(90deg) translateX(20px) translateZ(20px);
}

.glass-pane .back {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transform: translateZ(-40px);
}

.glass-pane .front {
    position: absolute;     
    background: #fff;
}

.glass-pane .front iframe, .glass-pane .front .cover {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    margin: 0;
    z-index: 1;
}

.glass-pane .front .cover {
    z-index: 2;
    display: none;
}

/* Positions */

.position-main {
    -webkit-transform: scale(1);
    opacity: 1;
}

.position-back {
    -webkit-transform: scale(0.8) rotateX(2deg);
    opacity: 0.5;
}

.position-off-right {
    -webkit-transform: scale(0.8) translateZ(-200px);
    opacity: 0.5;
    left:...

JavaScript

num_positions = 5;

var advance = function() {
    $('.position-main').removeClass('position-main').addClass('position-back');
    setTimeout(function(){
        $('.position-off-left').removeClass('position-off-left').addClass('position-main');
        $('.position-back').removeClass('position-back').addClass('position-off-right');
        setTimeout(function(){
            $('.position-off-right').removeClass('position-off-right').addClass('position-off-left');
        }, 3000);
    }, 1000);
}

setInterval(function(){
    advance();
}, 5000);