Impress.js Cube - 改变过渡的方向答案

【问题标题】：Impress.js Cube - change the direction of transitionImpress.js Cube - 改变过渡的方向
【发布时间】：2013-04-01 15:55:09
【问题描述】：

我在 impress.js 中制作了一个立方体作为我的第一个练习项目，它工作正常，除了从面 3 到 4 的过渡。面 1、2、3、4 都平行于 Z 轴，从顶部看时以逆时针方向放置。从 1 -> 2, 2 -> 3 （逆时针，从顶部）过渡是可以的，但从 3->4 过渡是顺时针的，即它移回 2 然后 1 然后 4。任何改变它的方法，使它从3 -> 4 直接？

这是我的代码：

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; }

【问题讨论】：

这里也没有答案 stackoverflow.com/questions/11298185/…
你试过在第4面使用data-rotate-y="270"吗？

标签： css impress.js

【解决方案1】：

每一步都应尽可能接近下一步。不要从 180 转到 -90，而是转到 270（即使是一样的）。

这段代码应该做你想做的：

<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>

【讨论】：