Javascript 在impress.js上更改幻灯片时不会显示任何内容

我从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>

康特努斯酒店
avec
标准杆

韦纳尔（）
历史的

我用

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

}

.impress已启用。步骤{
保证金：0；
不透明度：0.3；
-webkit转换：不透明度1s；
-moz转变：不透明度1s；
-ms转换：不透明度1s；
-o-转变：不透明度1s；
过渡：不透明度1s；
}
.impress已启用。步骤.active{opacity:1}
/*
这些“幻灯片”步骤风格深受HTML5幻灯片的启发：
http://html5slides.googlecode.com/svn/trunk/styles.css
;)
它们涵盖了演示的前三个步骤中看到的所有内容。
*/
.幻灯片{
显示：块；
宽度：900px；
高度：700px；
填充：40px 60px；
背景色：白色；
边框：1px实心rgba（0,0,0,3）；
边界半径：10px；
盒影：02px6pxRGBA（0,0,0,1）；
颜色：rgb（102102102）；
文本阴影：02px2pRGBA（0,0,0,1）；
字体系列：“开放式Sans”、Arial、Sans serif；
字体大小：30px；
线高：36px；
字母间距：-1px；
}
.幻灯片q{
显示：块；
字体大小：50px；
线高：72px；
边缘顶部：100px；
}
.幻灯片q strong{
空白：nowrap；
}
/*
现在我们开始分别设置每个步骤的样式。
我同意这可能不是最有效的、面向对象的和最有效的方法
可扩展的样式设计方式，但大多数步骤都有相当定制的外观
还有这里那里的排版技巧，所以它们必须分开设计。
第一个是标题步骤，有一个大的（没有填充空间）和一些
沿Z轴进行三维定位。
*/
/* 
*乳头
* =====
*/
@关键帧旋转-h1{
0%{变换：透视（1000px）旋转（-5度）；}
100%{变换：透视（1000px）旋转（5度）；}
}
#标题h1{
字体大小：300；
字体大小：45px；
文本对齐：居中；
}
#标题h1.搜索{
显示：块；
-webkit转换：translateZ（30px）；
-moz变换：translateZ（30px）；
变换：translateZ（30px）；
}
#标题h1.带有{
显示：块；
-webkit转换：translateZ（20px）；
-moz变换：translateZ（20px）；
变换：translateZ（20px）；
}
#标题h1.团结{
显示：块；
变换样式：保留-3d；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-webkit转换：translateZ（50px）；
-moz变换：translateZ（50px）；
变换：translateZ（50px）；
动画：旋转-h1 3s无限交替缓进-缓出；
}
#标题.作者{
显示：块；
文本对齐：居中；
字体大小：正常；
线高：1.5；
/*不透明度：0*/
过渡：不透明度1s；
-webkit转换：不透明度1s；
-moz转变：不透明度1s；
}
#标题：乌邦图帕蒂{
显示：块；
文本对齐：居中；
字体大小：.75em；
}
/*
*历史标题
* ================
*/
#历史标题h2{
显示：块；
字体大小：300；
字体大小：32px；
不透明度：1；
}

我不明白为什么我的

#historique_title h2

没有出现。我尝试使用firefox控制台进行查看，但没有找到错误的参数

有人能帮我处理这个案子吗

---

Thx Prevence各位

您是否只在Firefox中存在此问题？你们能在Chrome上测试一下吗？我试过Firefox和Chrome，但仍然有问题。我认为这是轴的变化造成的。当我绕Y旋转90°时，我在平面图Z-Z中工作，而不是在X-Y中。因此，数据转换的设置可能有一个技巧，你不这么认为吗？也许添加一个转换：将一些东西旋转到我的h2 css值中？