0

我从 impress.js 开始，但我坚持。我想在我的演示文稿上使用立方体效果，但是当幻灯片更改时，我的内容不会出现。

我的 index.html 中有这两张幻灯片

<div 
    id="title" 
    class="step" 
    data-x="0" data-y="0" data-z="0"
    data-rotate-x="0" data-rotate-y="0" data-rotate-z="0">

    <h1>
        <span class="search">Recherche de contenus</span>
        <span class="with">avec</span></span>
        <span class="unity"><img width="200px" src="img/Unity_logo.svg"></img></span>
    </h1>

    <span class="author">
        <i>par</i><br/>
        <span class="name">Winael</span> (<a href="https://plus.google.com/u/0/107666944254113159692/posts">+Vincent JOBARD</a>)
    </span>
    <a class="ubuntuparty" href="http://ubuntu-paris.org">Ubuntu Party de Paris - 16 Novembre 2013</a>

</div>

<div 
    id="historique_title" 
    class="step" 
    data-scale="10"
    data-x="0" data-y="0" data-z="-500" 
    data-rotate-x="0" data-rotate-y="90" data-rotate-z="0">

    <h2>Historique</h2>

</div>

我设置了我的css样式表

    .impress-enabled .step {
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

/*
    These 'slide' step styles were heavily inspired by HTML5 Slides:
    http://html5slides.googlecode.com/svn/trunk/styles.css

    ;)

    They cover everything what you see on first three steps of the demo.
*/
.slide {
    display: block;

    width: 900px;
    height: 700px;
    padding: 40px 60px;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
}

.slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
}

.slide q strong {
    white-space: nowrap;
}

/*
    And now we start to style each step separately.

    I agree that this may be not the most efficient, object-oriented and
    scalable way of styling, but most of steps have quite a custom look
    and typography tricks here and there, so they had to be styled separately.

    First is the title step with a big <h1> (no room for padding) and some
    3D positioning along Z axis.
*/



/* 
 * TITRE
 * =====
 */

 @keyframes rotate-h1 {
    0%   { transform: perspective(1000px) rotateY(-5deg); }
    100% { transform: perspective(1000px) rotateY(5deg); }
 }

 #title h1 {

    font-weight: 300;
    font-size: 45px;
    text-align: center;

 }

 #title h1 .search {
    display: block;

    -webkit-transform:translateZ(30px);
    -moz-transform: translateZ(30px);
    transform: translateZ(30px);

}

#title h1 .with {
    display: block;

    -webkit-transform:translateZ(20px);
    -moz-transform: translateZ(20px);
    transform: translateZ(20px);
}

#title h1 .unity {
    display: block;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;

    -webkit-transform:translateZ(50px);
    -moz-transform: translateZ(50px);
    transform: translateZ(50px);

    animation: rotate-h1 3s infinite alternate ease-in-out;
}

 #title .author {
    display: block;
    text-align: center;
    font-weight: normal;
    line-height: 1.5;
    /*opacity: 0;*/
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

#title .ubuntuparty {

    display: block;
    text-align: center;
    font-size: .75em;

}

/*
 * HISTORIQUE_TITLE
 * ================
 */

#historique_title h2 {

    display: block;
    font-weight: 300;
    font-size: 32px;
    opacity: 1;

}

我不明白为什么我#historique_title h2的没有出现。我尝试使用firefox控制台查看，但没有找到错误的参数

有人可以帮我处理这个案子吗？

提前谢谢各位

4

0 回答 0