<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : GM-mhmm.html |
| Author : Giuliana Mei |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 40vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
}
ul {
margin: 0;
list-style: none;
transform-style: preserve-3d;
animation: three-dimensions-circle 7s linear infinite;
animation-direction: alternate-reverse;
}
li {
position: absolute;
top: 50%;
left: 50%;
}
li:nth-child(1) {
transform: translate(-50%, -50%) rotate(0deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(3) {
transform: translate(-50%, -50%) rotate(60deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(4) {
transform: translate(-50%, -50%) rotate(90deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(5) {
transform: translate(-50%, -50%) rotate(120deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(6) {
transform: translate(-50%, -50%) rotate(150deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(7) {
transform: translate(-50%, -50%) rotate(180deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(8) {
transform: translate(-50%, -50%) rotate(210deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(9) {
transform: translate(-50%, -50%) rotate(240deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(10) {
transform: translate(-50%, -50%) rotate(270deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(11) {
transform: translate(-50%, -50%) rotate(300deg) translateY(-260px) rotateX(90deg);
}
li:nth-child(12) {
transform: translate(-50%, -50%) rotate(330deg) translateY(-260px) rotateX(90deg);
}
@keyframes three-dimensions-circle {
0% {
transform: rotateX(360deg) rotate(0deg);
}
100% {
transform: rotateY(100deg) rotate(180deg);
}
}
</style>
</head>
<ul>
<li>m</li>
<li>h</li>
<li>h</li>
<li>m</li>
<li>m</li>
<li>.</li>
<li>.</li>
<li>.</li>
<li>m</li>
<li>m</li>
<li>m</li>
<li>m</li>
</ul>
</body>
</html>
