Impress.js多維數據集 - 改變轉換方向

我做了一個impress.js作爲我的第一個實踐項目，其工作正常，除了從第3面到第4面的過渡。面1,2,3,4都是平行於Z軸並且從頂部看時以逆時針方向放置。從1→2，2→3（逆時針，從頂部）過渡是可以的，但從3-> 4的過渡是順時針的，即它回到2然後1然後4.任何方式來改變它，使它從3 - > 4直接？Impress.js多維數據集 - 改變轉換方向

這裏是我的代碼：

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

來源

2013-04-01 Sourabh

沒有回答，這裏也http://stackoverflow.com/questions/11298185/how-to-get-a-full-seemless-rotation-with- impress-js – Michel

你有沒有嘗試過在數據4上使用'data-rotate-y =「270」'？ – bdiamante

每一步應儘量靠近下一步越好。而不是從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>

來源

2013-05-18 11:41:05

謝謝！有用！！ :) – Sourabh

Impress.js多維數據集 - 改變轉換方向

回答

相關問題