Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

3D Cube Flip Effect for WOW.js

November 12, 2015 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