Skip to content

Instantly share code, notes, and snippets.

@pseudo-usama

pseudo-usama/Transparent auto rotating Cube.html

Last active September 30, 2023 17:31
Show Gist options
  • Save pseudo-usama/e2f34ccffdbe31a477cd4b751d057126 to your computer and use it in GitHub Desktop.
Save pseudo-usama/e2f34ccffdbe31a477cd4b751d057126 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Transparent auto rotating Cube.html
<!--
https://twitter.com/UsamaIftikharB1
https://www.linkedin.com/in/usama-butt
https://github.com/pseudo-usama
-->
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.cube {
position: absolute;
height: 150px;
width: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 250px;
}
.cube .inner-cube {
position: relative;
height: 100%;
width: 100%;
transform-style: preserve-3d;
animation: myanimation 10s linear infinite;
}
.cube .inner-cube div {
position: absolute;
height: 100%;
width: 100%;
opacity: 0.8;
font-size: 500%;
text-align: center;
line-height: 150px;
}
.cube .inner-cube .front { transform: translateZ(75px); background: green; }
.cube .inner-cube .right { transform: rotateY(90deg) translateZ(75px); background: gray; }
.cube .inner-cube .back { transform: rotateY(180deg) translateZ(75px); background: yellow; }
.cube .inner-cube .left { transform: rotateY(-90deg) translateZ(75px); background: blue; }
.cube .inner-cube .top { transform: rotateX(90deg) translateZ(75px); background: aqua; }
.cube .inner-cube .bottom { transform: rotateX(-90deg) translateZ(75px); background: greenyellow; }
@keyframes myanimation {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
.links {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.links a {
padding: 5px 33px;
text-decoration: none;
color: white;
background: rgb(58, 58, 58);
}
.links a:hover {
background: rgb(104, 104, 104);
}
</style>
</head>
<body style="font-family: sans-serif">
<div class="cube">
<div class="inner-cube">
<div class="front">1</div>
<div class="right">2</div>
<div class="back">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
<div class="links">
<a href="https://twitter.com/UsamaIftikharB1" target="_blank">Twitter</a>
<a href="https://www.linkedin.com/in/usama-iftikhar-butt-b8203614a/" target="_blank">Linked in</a>
<a href="https://github.com/buttusamaiftikhar" target="_blank">Github</a>
<a href="https://www.youtube.com/channel/UCBLJy-IzwLY3gkrNQI8yABA" target="_blank">Youtube</a>
</div>
</body>
</html>
<!--
https://twitter.com/UsamaIftikharB1
https://www.linkedin.com/in/usama-butt
https://github.com/pseudo-usama
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment