Skip to content

Instantly share code, notes, and snippets.

@pcwalton

pcwalton/cube.html

Created May 15, 2018 21:26
Show Gist options
  • Save pcwalton/7ea3f7993adb18aff8d8d277699b9946 to your computer and use it in GitHub Desktop.
Save pcwalton/7ea3f7993adb18aff8d8d277699b9946 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cube.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Monument</title>
<style>
/*@keyframes spin {
from { transform: rotateY(0) scale(10); }
to { transform: rotateY(360deg) scale(30); }
}*/
body {
height: 50px;
margin-top: 100px;
font-size: 1px;
}
.wrap {
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 30px;
margin: 0 auto;
transform-style: preserve-3d;
/*animation: spin 5s infinite linear;
transform: rotateY(0) scale(10);*/
}
.cube div {
position: absolute;
width: 30px;
height: 30px;
text-align: center;
line-height: 1px;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube-outer">
<div class="cube" style="transform: rotateY(0) scale(10);">
<div class="front">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel
consectetur erat, a mattis tortor. In maximus pharetra justo a malesuada.
Suspendisse scelerisque quam vel ex tempor imperdiet. Integer at ligula
ultrices, consectetur nulla quis, eleifend sapien. Vestibulum non lobortis
velit, at porta dolor. In vel tempus enim, quis molestie libero. Vivamus id
magna eget ex accumsan sodales. Phasellus ac sapien cursus, posuere quam non,
lobortis nisl. Duis luctus neque urna, non placerat felis scelerisque eu. Sed
ac eros lacus. Curabitur sollicitudin dolor sapien, non ultricies nunc mollis
a. Suspendisse sed dolor sed massa molestie maximus vel sed tortor. Donec eu
sem nec felis pellentesque iaculis a vel felis. Morbi magna augue, suscipit
eget neque id, porttitor posuere arcu. Praesent sit amet pulvinar nisi.</p>
<p> Curabitur eget quam urna. Pellentesque varius, sapien vitae molestie
suscipit, velit sapien imperdiet lacus, vitae pulvinar urna risus ut odio.
Donec pellentesque eu magna quis dignissim. Curabitur rhoncus imperdiet
risus, at pulvinar ante lobortis eu. Etiam feugiat tincidunt metus, a pretium
nisi. Nam tincidunt vulputate tempus. Vestibulum id turpis in ante mollis
accumsan. Aenean consequat, tortor eu fringilla lobortis, ligula lectus
dapibus justo, at interdum tellus lacus sed est. Etiam volutpat in augue
consequat consectetur. Integer a erat porta, interdum massa eu, ultricies
dui. Vestibulum maximus semper velit eget porta. Mauris quis arcu eu ex
tempus sodales. </p>
<p> Etiam rhoncus arcu purus, sit amet convallis tellus consectetur at.
Curabitur pretium felis ut mauris pretium, ac tristique lorem commodo. Morbi
at lacinia sapien, eu facilisis elit. Nullam posuere bibendum congue.
Pellentesque maximus, ante a aliquet cursus, enim risus malesuada massa, vel
porta dolor diam sit amet ex. Morbi ac est venenatis, laoreet tellus sed,
rhoncus libero. Quisque semper suscipit velit. Ut non hendrerit risus. Fusce
ut sapien non lectus maximus feugiat eget et arcu. Nulla facilisi. Maecenas
id felis risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus scelerisque ultricies diam. Morbi nec aliquet turpis. Suspendisse
eget aliquet turpis. </p>
</div>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel
consectetur erat, a mattis tortor. In maximus pharetra justo a malesuada.
Suspendisse scelerisque quam vel ex tempor imperdiet. Integer at ligula
ultrices, consectetur nulla quis, eleifend sapien. Vestibulum non lobortis
velit, at porta dolor. In vel tempus enim, quis molestie libero. Vivamus id
magna eget ex accumsan sodales. Phasellus ac sapien cursus, posuere quam non,
lobortis nisl. Duis luctus neque urna, non placerat felis scelerisque eu. Sed
ac eros lacus. Curabitur sollicitudin dolor sapien, non ultricies nunc mollis
a. Suspendisse sed dolor sed massa molestie maximus vel sed tortor. Donec eu
sem nec felis pellentesque iaculis a vel felis. Morbi magna augue, suscipit
eget neque id, porttitor posuere arcu. Praesent sit amet pulvinar nisi.</p>
<p> Curabitur eget quam urna. Pellentesque varius, sapien vitae molestie
suscipit, velit sapien imperdiet lacus, vitae pulvinar urna risus ut odio.
Donec pellentesque eu magna quis dignissim. Curabitur rhoncus imperdiet
risus, at pulvinar ante lobortis eu. Etiam feugiat tincidunt metus, a pretium
nisi. Nam tincidunt vulputate tempus. Vestibulum id turpis in ante mollis
accumsan. Aenean consequat, tortor eu fringilla lobortis, ligula lectus
dapibus justo, at interdum tellus lacus sed est. Etiam volutpat in augue
consequat consectetur. Integer a erat porta, interdum massa eu, ultricies
dui. Vestibulum maximus semper velit eget porta. Mauris quis arcu eu ex
tempus sodales. </p>
<p> Etiam rhoncus arcu purus, sit amet convallis tellus consectetur at.
Curabitur pretium felis ut mauris pretium, ac tristique lorem commodo. Morbi
at lacinia sapien, eu facilisis elit. Nullam posuere bibendum congue.
Pellentesque maximus, ante a aliquet cursus, enim risus malesuada massa, vel
porta dolor diam sit amet ex. Morbi ac est venenatis, laoreet tellus sed,
rhoncus libero. Quisque semper suscipit velit. Ut non hendrerit risus. Fusce
ut sapien non lectus maximus feugiat eget et arcu. Nulla facilisi. Maecenas
id felis risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus scelerisque ultricies diam. Morbi nec aliquet turpis. Suspendisse
eget aliquet turpis. </p>
</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</div>
<script type="text/javascript">
const element = document.getElementsByClassName('cube')[0];
let scale = 10, rotation = 0, direction = false;
function tick() {
element.style.transform = `rotateY(${rotation}deg) scale(${scale})`;
if (!direction) {
scale += 0.3;
rotation++;
if (scale >= 90)
direction = true;
} else {
scale -= 0.3;
rotation--;
if (scale <= 10)
direction = false;
}
window.requestAnimationFrame(tick);
}
tick();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment