/
githubmirror
/
impress.js
Обзор
Документация
Войти
/
githubmirror
/
impress.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/3D-rotations/index.html
90 строк
4 KB
Falco Nogatz
Replace backslashes by slashes in href to CSS (#828)
12 дек 2022, 04:03
Не верифицирован
12 дек 2022, 04:03
64d66bf
Код
Авторство
О чём код?
<!doctype html> <!-- This is a simple example / template impress.js slide show. The goal is to be easier to read for a first timer than the official and very feature rich demo by bartaz (http://bartaz.github.io/impress.js/). It's also a very traditional presentation that looks like slides (square screens with bullet points...), again to make a first timer feel more at home. From this simple presentation you can then go on to more powerful impress.js presentations! This example is hopefully helpful for people that want to create both simple and (eventually) awesome presentations in impress.js and comfortable doing that directly in HTML. By: @henrikingo (Still based on the HTML from bartaz' demo.) --> <html lang="en"> <head> <meta charset="utf-8" /> <title>A Study in 3D Rotations| by Henrik Ingo @henrikingo</title> <meta name="description" content="Explore impress.js in 3D" /> <meta name="author" content="Henrik Ingo" /> <link href="../../css/impress-common.css" rel="stylesheet" /> <link href="css/3D-rotations.css" rel="stylesheet" /> </head> <body class="impress-not-supported"> <div class="fallback-message"> <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p> <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p> </div> <div id="impress" data-transition-duration="2000"> <div id="overview" class="step overview" data-x="1350" data-y="100" data-z="100" data-scale="3" data-rotate-y="90"> <h1>A Study in 3D Rotations</h1> </div> <div id="overview2" class="step overview" data-x="2018" data-y="106" data-z="3018" data-scale="2"> <p>Unlike the <code>x/y/z</code> coordinates (aka translations), the <code>rotate-x/y/z</code> rotations are applied in a specific order, and order matters. This demo presentation exhibits the use of the new <code>data-rotate- order</code> attribute. Instead of the default "xyz" order, the steps use the reversed <em>"zyx"</em> order in applying rotations around each axis. Some of the steps (<a href="#step-3">3</a> & <a href="#step-7">7</a>), are in positions that are not possible with the default "xyz" order.</p> </div> <div id="step-1" class="step" data-x="0" data-y="0" data-z="0" data-goto-prev="step-8"> <p>Slide one</p> </div> <div id="step-2" class="step" data-x="420" data-y="-70" data-z="-250" data-rotate-z="45" data-rotate-y="-45" data-rotate-order="zyx"> <p>Slide two</p> </div> <div id="step-3" class="step" data-x="700" data-y="350" data-z="-350" data-rotate-z="90" data-rotate-y="-90" data-rotate-order="zyx"> <p>Slide three</p> </div> <div id="step-4" class="step" data-x="422" data-y="780" data-z="-250" data-rotate-z="135" data-rotate-y="-135" data-rotate-order="zyx"> <p>Slide four</p> </div> <div id="step-5" class="step" data-x="0" data-y="702" data-z="0" data-rotate-z="180" data-rotate-y="-180" data-rotate-order="zyx"> <p>Slide five</p> </div> <div id="step-6" class="step" data-x="379" data-y="780" data-z="270" data-rotate-z="135" data-rotate-y="-225" data-rotate-order="zyx"> <p>Slide six</p> </div> <div id="step-7" class="step" data-x="700" data-y="350" data-z="350" data-rotate-z="90" data-rotate-y="-270" data-rotate-order="zyx"> <p>Slide seven</p> </div> <div id="step-8" class="step" data-x="379" data-y="-70" data-z="270" data-rotate-z="45" data-rotate-y="-315" data-rotate-order="zyx" data-goto-next="step-1"> <p>Slide eight</p> </div> </div> <div id="impress-toolbar"></div> <div id="impress-help"></div> <script type="text/javascript" src="../../js/impress.js"></script> <script>impress().init();</script> </body> </html>