Impress.js Cube - изменить направление перехода

Я сделал куб в impress.js как свой первый практический проект и его рабочий тон, за исключением перехода от лица 3 к 4. Лица 1,2,3,4 все параллельно оси Z и помещается в направлении против часовой стрелки, если смотреть сверху. Переход от 1 -> 2, 2 -> 3 (против часовой стрелки, сверху) - это нормально, но переход от 3-> 4 по часовой стрелке, т. Е. Он возвращается к 2, затем 1, затем 4. Любой способ изменить его так, чтобы он перемещался из 3 -> 4 напрямую?Impress.js Cube - изменить направление перехода

Вот мой код:

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

Вы пытались использовать 'data-rotate-y =" 270 "' on face 4? – 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 Cube - изменить направление перехода

ответ

Смежные вопросы