igstan/css-3d-transforms.html

## css-3d-transforms.html
<!DOCTYPE html>

<!-- Demo: https://www.youtube.com/watch?v=7M9aPgORP_E -->

<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 3D Transforms &amp; Animations</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #333;
      height: 1000px;
    }

    .container {
      height: 100%;
      text-align: center;
      align-items: center;
      justify-content: center;
      display: flex;
      perspective: 650px;
    }

    .layers {
      width: 200px;
      height: 200px;
      transform-origin: top left;
      transform-style: preserve-3d;
      transform: rotateY(35deg) rotateZ(-5deg) rotateX(-7deg);
    }

    .layer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: inherit;
      font: 20px Menlo;
      color: #fff;
    }

    td {
      color: #333;
      font: 20px Menlo;
      padding: 20px 30px;
      background: burlywood;
      border: solid black 1px;
      border-radius: 5px;
    }
  </style>
  <script type="text/javascript">
    const animateLayers = event => {
      document
        .querySelectorAll('table')
        .forEach(table => {
          const anim = table.animate(
            [
              { transform: `${table.style.transform}` },
              { transform: `${table.style.transform} translateZ(3500px)` }
            ],
            {
              duration: 10000,
              iterations: 1
            }
          );
        });
    };

    window.addEventListener('DOMContentLoaded', event => {
      document.addEventListener('click', animateLayers);

      const layers = document.querySelector('#layers');
      const layerTemplate = document.querySelector('.layer');

      for (let i = 0; i < layers.dataset.count; i++) {
        const layer = layerTemplate.cloneNode(true);
        layer.style.transform = `translateZ(${-50 * i}px)`;
        layer.classList.add('layer');
        layers.appendChild(layer);
      }
    });
  </script>
</head>
<body title="Click anywhere to start the animation">
  <div id="container" class="container">
    <div id="layers" class="layers" data-count="50">
      <table class="layer">
        <tr><td>.</td><td>.</td><td>.</td><td>0</td><td>.</td><td>.</td><td>.</td></tr>
        <tr><td>B</td><td>></td><td>.</td><td>=</td><td>.</td><td>.</td><td>.</td></tr>
        <tr><td>v</td><td>1</td><td>.</td><td>.</td><td>></td><td>.</td><td>.</td></tr>
        <tr><td>.</td><td>-</td><td>.</td><td>.</td><td>.</td><td>+</td><td>S</td></tr>
        <tr><td>.</td><td>.</td><td>.</td><td>.</td><td>^</td><td>.</td><td>.</td></tr>
        <tr><td>.</td><td>v</td><td>.</td><td>.</td><td>0</td><td>></td><td>.</td></tr>
        <tr><td>.</td><td>.</td><td>.</td><td>.</td><td>.</td><td>A</td><td>+</td></tr>
        <tr><td>1</td><td>@</td><td>6</td><td>.</td><td>.</td><td><</td><td>.</td></tr>
        <tr><td>.</td><td>3</td><td>.</td><td>0</td><td>@</td><td>3</td><td>.</td></tr>
        <tr><td>.</td><td>.</td><td>.</td><td>.</td><td>3</td><td>.</td><td>.</td></tr>
      </table>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>

	<!-- Demo: https://www.youtube.com/watch?v=7M9aPgORP_E -->

	<html>
	<head>
	<meta charset="UTF-8">
	<title>CSS 3D Transforms & Animations</title>
	<style type="text/css">
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	background: #333;
	height: 1000px;
	}

	.container {
	height: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	display: flex;
	perspective: 650px;
	}

	.layers {
	width: 200px;
	height: 200px;
	transform-origin: top left;
	transform-style: preserve-3d;
	transform: rotateY(35deg) rotateZ(-5deg) rotateX(-7deg);
	}

	.layer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: inherit;
	font: 20px Menlo;
	color: #fff;
	}

	td {
	color: #333;
	font: 20px Menlo;
	padding: 20px 30px;
	background: burlywood;
	border: solid black 1px;
	border-radius: 5px;
	}
	</style>
	<script type="text/javascript">
	const animateLayers = event => {
	document
	.querySelectorAll('table')
	.forEach(table => {
	const anim = table.animate(
	[
	{ transform: `${table.style.transform}` },
	{ transform: `${table.style.transform} translateZ(3500px)` }
	],
	{
	duration: 10000,
	iterations: 1
	}
	);
	});
	};

	window.addEventListener('DOMContentLoaded', event => {
	document.addEventListener('click', animateLayers);

	const layers = document.querySelector('#layers');
	const layerTemplate = document.querySelector('.layer');

	for (let i = 0; i < layers.dataset.count; i++) {
	const layer = layerTemplate.cloneNode(true);
	layer.style.transform = `translateZ(${-50 * i}px)`;
	layer.classList.add('layer');
	layers.appendChild(layer);
	}
	});
	</script>
	</head>
	<body title="Click anywhere to start the animation">
	<div id="container" class="container">
	<div id="layers" class="layers" data-count="50">
	<table class="layer">
	<tr><td>.</td><td>.</td><td>.</td><td>0</td><td>.</td><td>.</td><td>.</td></tr>
	<tr><td>B</td><td>></td><td>.</td><td>=</td><td>.</td><td>.</td><td>.</td></tr>
	<tr><td>v</td><td>1</td><td>.</td><td>.</td><td>></td><td>.</td><td>.</td></tr>
	<tr><td>.</td><td>-</td><td>.</td><td>.</td><td>.</td><td>+</td><td>S</td></tr>
	<tr><td>.</td><td>.</td><td>.</td><td>.</td><td>^</td><td>.</td><td>.</td></tr>
	<tr><td>.</td><td>v</td><td>.</td><td>.</td><td>0</td><td>></td><td>.</td></tr>
	<tr><td>.</td><td>.</td><td>.</td><td>.</td><td>.</td><td>A</td><td>+</td></tr>
	<tr><td>1</td><td>@</td><td>6</td><td>.</td><td>.</td><td><</td><td>.</td></tr>
	<tr><td>.</td><td>3</td><td>.</td><td>0</td><td>@</td><td>3</td><td>.</td></tr>
	<tr><td>.</td><td>.</td><td>.</td><td>.</td><td>3</td><td>.</td><td>.</td></tr>
	</table>
	</div>
	</div>
	</body>
	</html>