Impress.js Cube - change the direction of transition

Question

I made a cube in impress.js as my first practice project and its working fine except the transition from face 3 to 4. Faces 1,2,3,4 are all parallel to Z-axis and placed in anticlockwise direction when viewed from top. Transition from 1 -> 2, 2 -> 3 (anticlockwise, from top) is ok but transition from 3->4 is clockwise, ie it moves back to 2 then 1 then 4. Any way to change it so that it moves from 3 -> 4 directly?

Here's my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "utf-8">
    <title>Cube using Impress.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body class="impress-not-supported">

    <div class="fallback-message">
            <!-- Message here -->
    </div>

    <div id="impress">

        <div id="face-1" class="step" data-z="350">
            This is face 1
        </div>

        <div id="face-2" class="step" data-x="350" data-rotate-y="90">
            This is face 2
        </div>

        <div id="face-3" class="step"data-z="-350" data-rotate-y="180">
            This is face 3
        </div>

        <div id="face-4" class="step" data-x="-350" data-rotate-y="-90">
            This is face 4
        </div>

        <div id="face-5" class="step" data-y="-350" data-rotate-x="90">
            This is face 5
        </div>

        <div id="face-6" class="step" data-y="350" data-rotate-x="-90">
            This is face 6
        </div>
    </div>

    <script src="impress.js"></script>
    <script>impress().init();</script>
</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font: normal 70px/70px sans-serif;
    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
}

b, strong { font-weight: bold }
i, em { font-style: italic }

.fallback-message {
    font-family: sans-serif;
    line-height: 1.3;

    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;

    border: 1px solid #E4C652;
    border-radius: 10px;
    background: #EEDC94;
}

.fallback-message p {
    margin-bottom: 10px;
}

.impress-supported .fallback-message {
    display: none;
}

.step {
    -webkit-box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    width: 700px;
    height: 700px;
    border: 1px solid black;
    text-align: center;
    padding: 25px;
    opacity: .3;
}

.step.active{ opacity: 1; }

No answers here too http://stackoverflow.com/questions/11298185/how-to-get-a-full-seemless-rotation-with-impress-js — Rahul Shah, Apr 01 '13 at 17:12

score 1 · Accepted Answer · answered May 18 '13 at 11:41

Each step should be as close to the next step as possible. Instead of going from 180 to -90, go to 270 (even though that's the same).

This code should do what you want:

<div id="impress">

    <div id="face-1" class="step" data-z="350">
        This is face 1
    </div>

    <div id="face-2" class="step" data-x="350" data-rotate-y="90">
        This is face 2
    </div>

    <div id="face-3" class="step"data-z="-350" data-rotate-y="180">
        This is face 3
    </div>

    <div id="face-4" class="step" data-x="-350" data-rotate-y="270">
        This is face 4
    </div>

    <div id="face-5" class="step" data-y="-350" data-rotate-x="90" data-rotate-y="360">
        This is face 5
    </div>

    <div id="face-6" class="step" data-y="350" data-rotate-x="270" data-rotate-y="360">
        This is face 6
    </div>

</div>

Impress.js Cube - change the direction of transition

1 Answers1