Question

我在impress.js中制作了一个立方体作为我的第一个练习项目，并且除了从第3面到第4面的过渡之外它的工作正常。面1,2,3,4全部平行于Z轴，并且从顶部观察时沿逆时针方向放置。从1 - >转换2,2 - ＆gt; 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; }

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

Impress.js Cube - 改变过渡方向

1 个答案: