Skip to content

Instantly share code, notes, and snippets.

@the-codepunker

the-codepunker/3dwow.html

Last active November 13, 2015 06:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save the-codepunker/eb104808c031910701b5 to your computer and use it in GitHub Desktop.
Save the-codepunker/eb104808c031910701b5 to your computer and use it in GitHub Desktop.
Download ZIP
3D Cube Flip Effect for WOW.js - demo: https://www.codepunker.com/resources/3d-flip-for-wow-js
Raw
3dwow.html
<!DOCTYPE HTML>
<html>
<head>
<title>3D Cube Flip Effect for WOW.js</title>
<link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport{
width: device-width;
}
body {
background: #4BB5C1;
font-family: 'Lato', sans-serif;
font-size: 1.5em;
line-height: 1.1em;
letter-spacing: .05em;
margin: 0;
opacity: 0;
-webkit-transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
-moz-transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
-ms-transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
-o-transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
transition: opacity .5s cubic-bezier(0, 0, 0.2, 1);
}
.back { background: #6D6D6D; padding:2px 20px; text-align: center; position:fixed; top:0px; }
.back a { color: white; text-decoration: none; font-size: 12px; }
header {
background: #46ABB6;
padding: 20px 0;
}
footer {
text-align: center;
background: #18383C;
padding: 40px 0;
color:#fff;
}
.heading {
line-height: 1.1em;
text-align: center;
font-weight: 400;
font-size: 1.7em;
color: #EDF7F2;
}
.largelink {
line-height: 1.1em;
text-align: center;
font-weight: 400;
font-size: 1em;
text-decoration: none;
color: #EDF7F2;
}
.main {
width: 900px;
margin: 2% auto;
max-width: 95%;
min-height: 400px;
border-radius: 5px;
color: #444;
font-size: 1.5em;
}
.inner {
width: 96%;
padding: 2%;
}
.line {
line-height: 1.5em;
font-weight: 300;
display: table;
padding: 0 !important;
width: 100%;
position: relative;
}
.col50 {
width:50%;
display: table-cell;
}
@media (max-width: 480px) {
.col50 {
width: 100%;
}
.hiddenmob {
display: none !important;
}
}
.forcesquare {
padding-top: 0;
padding-bottom: 100%;
height: 0;
position: relative;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.box-scene {
margin: auto;
z-index: 999;
position: absolute;
-webkit-perspective: 10000;
-khtml-perspective: 10000;
-moz-perspective: 10000;
-ms-perspective: 10000;
-o-perspective: 10000;
perspective: 10000;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 10px;
}
.box-scene.active .box {
-webkit-transform: rotateY(-90deg);
-khtml-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.box {
width: 100%;
height: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-khtml-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 90px 90px -90px;
-khtml-transform-origin: 90px 90px -90px;
-moz-transform-origin: 90px 90px -90px;
-ms-transform-origin: 90px 90px -90px;
-o-transform-origin: 90px 90px -90px;
transform-origin: 90px 90px -90px;
-webkit-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
-moz-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
-ms-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
-o-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-khtml-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: visible;
-webkit-transform-origin: 0 0;
-khtml-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
-khtml-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 2;
}
.side {
-webkit-transform: rotateY(90deg);
-khtml-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
z-index: 1;
left: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.inner-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-khtml-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
font-size: .8em;
}
.bg1, .bg3, .bg5 { background-color: #444; }
.bg2 { background-image: url('1.jpg'); }
.bg4 { background-image: url('2.jpg'); }
.bg6 { background-image: url('3.jpg'); }
</style>
</head>
<body>
<div class="back">
<a href="https://www.codepunker.com">&laquo; Back to the website</a>
</div>
<header>
<h1 class="heading">3D Cube Flip Effect for WOW.js</h1>
</header>
<section class="main">
<div class="inner">
<div class="line">
<div class="col50">
<div class="forcesquare">
<div class="box-scene">
<div class="box">
<div class="front face bg1"></div>
<div class="side face bg2">
<div class="inner-content"> <!-- bg-16 -->
<h2 class="text-uppercase color-10">
Coffee</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col50 hiddenmob"><div class="forcesquare hiddenmob"></div></div>
</div>
<div class="line">
<div class="col50 hiddenmob"><div class="forcesquare hiddenmob"></div></div>
<div class="col50">
<div class="forcesquare">
<div class="box-scene">
<div class="box">
<div class="front face bg3"></div>
<div class="side face bg4">
<div class="inner-content"> <!-- bg-16 -->
<h2 class="text-uppercase color-10">
Juice</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="col50">
<div class="forcesquare">
<div class="box-scene">
<div class="box">
<div class="front face bg5"></div>
<div class="side face bg6">
<div class="inner-content"> <!-- bg-16 -->
<h2 class="text-uppercase color-10">
Whisky</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col50 hiddenmob"><div class="forcesquare hiddenmob"></div></div>
</div>
<div class="line">
<div class="col50 hiddenmob"><div class="forcesquare hiddenmob"></div></div>
<div class="col50">
<div class="forcesquare">
<div class="box-scene">
<div class="box">
<div class="front face bg3"></div>
<div class="side face bg4">
<div class="inner-content"> <!-- bg-16 -->
<h2 class="text-uppercase color-10">
Juice</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="col50">
<div class="forcesquare">
<div class="box-scene">
<div class="box">
<div class="front face bg1"></div>
<div class="side face bg2">
<div class="inner-content"> <!-- bg-16 -->
<h2 class="text-uppercase color-10">
Coffee</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col50 hiddenmob"><div class="forcesquare hiddenmob"></div></div>
</div>
<div class="line">
<div class="col50 hiddenmob"><div class="forcesquare hiddenmob"></div></div>
<div class="col50">
<div class="forcesquare">
<div class="box-scene">
<div class="box">
<div class="front face bg5"></div>
<div class="side face bg6">
<div class="inner-content"> <!-- bg-16 -->
<h2 class="text-uppercase color-10">
Whisky</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="line">
<p>
Credits:
</p>
</div>
<div class="line">
<a class="largelink" rel="nofollow" target="_blank" href="https://pixabay.com/">Photos from Pixabay</a>
</div>
<div class="line">
<a class="largelink" rel="nofollow" target="_blank" href="http://mynameismatthieu.com/WOW/">WOW.js by Matthieu Aussaguel</a>
</div>
</footer>
<!-- script area -->
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script>
window.addEventListener('load', function() {
document.getElementsByTagName('body')[0].style.opacity = 1;
var wow = new WOW(
{
boxClass: 'box-scene',
animateClass: 'active',
offset: 300,
mobile: true,
live: false,
}).init();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment