为什么 impress.js 不旋转答案

【问题标题】：Why impress.js does not rotate为什么 impress.js 不旋转
【发布时间】：2013-09-30 06:58:58
【问题描述】：

我有点搞乱了 impress.js。我想要 4 张幻灯片，想让它看起来像中间有一个正方形。

我的代码如下所示：

<!doctype html>
<html>
    <head>
        <title>my first presentation using impress.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
        <link href="css/impress-demo.css" rel="stylesheet" />
    </head>
    <body>

        <div id="impress">
            <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
                <p>This is my first slide.</p>
            </div>
            <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
                <p>This is my second slide.</p>
            </div>
            <div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
                <p>This is my third slide.</p>
            </div>
            <div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
                <p>This is my fourth slide.</p>
            </div>
        </div>
        <script type="text/javascript" src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>

它最终必须看起来像这样。

我不知道为什么它不起作用。感谢您的帮助。

【问题讨论】：

叫我笨蛋，但你没有在代码中引用impress.js 文件。它是如何工作的？

标签： html css impress.js

【解决方案1】：

如果您关注 Bartaz GitHub 网站上的 index.html，您会发现，您在配置演示文稿时遗漏了一行。

<script src="js/impress.js"></script> //add this line and edit the path accordingly
<script>impress().init();</script>

在我看来，旋转本身的代码看起来不错。您只需要修改定位以及 x 和 y 轴。

亲切的问候

//编辑：在第三步和第四步中检查您的data-rotate。 - 丢失了，因此它无法正常工作。

<div id="impress">
        <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
            <p style="font-size:36px;">This is my first slide.</p>
        </div>
        <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
            <p style="font-size:36px;">This is my second slide.</p>
        </div>
        <div id="3von4" class="step slide" data-x="0" data-y="1800" data-rotate="180">
            <p style="font-size:36px;">This is my third slide.</p>
        </div>
        <div id="4von4" class="step slide" data-x="-950" data-y="950" data-rotate="270">
            <p style="font-size:36px;">This is my fourth slide.</p>
        </div>
    </div>

【讨论】：

呃，我没有在我的代码中使用这一行吗？在
和