Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

3D Cube Flip Effect for WOW.js

Difficulty: 10 / 50 Tweet
cubes

Hi there, It’s cool CSS animations day!

I did this for a customer a few days ago and thought it would be nice to share it.
For those of you who are not familiar with WOW.js, it is a cool JavaScript plugin, created by Matt Aussaguel that reveals animations when you scroll.
While Wow.js plays nicely with animate.css the former CSS generator doesn’t have a 3D flip effect and that’s what I needed for my project.

I added the code below and as a Gist, but you can also grab it from the demo page where you can see how it fits into context:

    <div class="box-scene">
        <div class="box">
            <div class="front face bg1"></div>
            <div class="side face bg2">
                <div class="inner-content">
                    <h2 class="text-uppercase color-10">
                        Coffee</h2>
                </div>
            </div>
        </div>
    </div>
    var wow = new WOW(
    {
        boxClass:     'box-scene',
        animateClass: 'active',
        offset:       300,
        mobile:       true,
        live:         false,
    }).init();
        .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;
        }
comments powered by Disqus