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