Skip to content

Instantly share code, notes, and snippets.

@weszty

weszty/impress.js 3D slide

Forked from theredstapler/impress.js 3D slide
Created November 15, 2021 10:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save weszty/40be408d9191f18cae0f367831ec9b25 to your computer and use it in GitHub Desktop.
Save weszty/40be408d9191f18cae0f367831ec9b25 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
impress.js 3D slide
<!doctype html>
<html>
<head>
<style>
body{
background-color: #dfdfdf;
}
.box {
display: block;
width: 800px;
height: 600px;
padding: 30px 50px;
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-family: Arial, sans-serif;
font-size: 40px;
color: rgb(102, 102, 102);
}
</style>
</head>
<body>
<div id="impress">
<div class="step box" data-x="0" data-y="0" data-rotate-z="90">
<p>This is my first slide!!</p>
</div>
<div class="step box" data-x="0" data-y="1000" data-rotate-y="90">
<p>This is my second slide!!</p>
</div>
<div class="step box" data-z="-2000" data-y="1000" data-rotate-y="180">
<p>This is my third slide!!</p>
</div>
</div>
<script src="js/impress.js"></script>
<script>
impress().init();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment