evolution-presentation-persian/impress/examples/3D-rotations/index.html
2018-04-26 02:00:45 +04:30

90 lines
3.8 KiB
HTML

<!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/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> &amp; <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>