Skip to content

Instantly share code, notes, and snippets.

@igstan

igstan/css-3d-transforms.html

Created July 7, 2024 11:46
Show Gist options
  • Save igstan/f7e3acc3e760a101a78a2f3e58888b5d to your computer and use it in GitHub Desktop.
Save igstan/f7e3acc3e760a101a78a2f3e58888b5d to your computer and use it in GitHub Desktop.
Download ZIP
CSS 3D Transforms & Animations
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment