问Impress.js多维数据集-更改过渡方向
EN

Stack Overflow用户

提问于 2013-04-01 23:55:10

回答 1查看 1.1K关注 0票数 0

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

css

impress.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-05-18 19:41:06

每一步都应该尽可能接近下一步。而不是从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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15746770

复制

相似问题

问Impress.js多维数据集-更改过渡方向
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Impress.js多维数据集-更改过渡方向EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Impress.js多维数据集-更改过渡方向
EN