:root { --c: 15;/* size */ --u: 1%;/* units: % px vw ... */ --s: calc(var(--c) * var(--u)); } body { margin: 0; padding: 0; background-color: #000; overflow: hidden; } .moon { position: absolute; width: 20%; height: 0; padding-bottom: 20%; top: 2.5%; left: 2.5%; border-radius: 50%; background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5b/635-new-moon.svg"); background-size: 120%; background-position: 50% 50%; background-repeat: no-repeat; box-shadow: 0 0 3vw 1vw #fff; } .perspective { position: absolute; width: var(--s); height: 0; padding-bottom: var(--s); /*box-shadow: inset 0 0 0 1vw #000;*/ top: 50%; left: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%); perspective: 750px; } .group, .right, .left, .f, .def{ position: absolute; width: 100%; height: 100%; /*background-color: rgba(0, 255, 0, .1);*/ transform-style: preserve-3d; } .group { transform: rotateX(0deg); } .right { animation: 9s ease-in-out infinite paused r-a; } .left { animation: 9s ease-in-out reverse infinite paused r-a; } .f { left: 100%; transform-origin: left; transform: rotateY(60deg); box-shadow: inset 0 0 0 .5vw rgba(255, 255, 255, .5); outline: 1px solid rgba(0, 0, 0, 0); } .f-1 { left: 0%; transform-origin: center; transform: rotateY(90deg) translateX(calc(100% * -1.732 / 2)) rotateY(-90deg); } .f-1, .f-2, .f-4, .f-5, .f-6 { background-size: 75%; background-repeat: no-repeat; background-position: 50% 10%; } .f-3 { background-size: 75%; background-repeat: no-repeat; background-position: 50% 45%; } .f-5{ background-position: 50% -5%; } .f-1 { background-image: url('data:image/svg+xml;utf8,'); } .f-2 { background-image: url('data:image/svg+xml;utf8,'); } .f-3 { background-image: url('data:image/svg+xml;utf8,') } .f-4 { background-image: url('data:image/svg+xml;utf8,') } .f-5 { background-image: url('data:image/svg+xml;utf8,') } .f-6 { background-image: url('data:image/svg+xml;utf8,') } .def { width: 100%; transform: rotateX(0deg) rotateY(90deg) translateX(calc(100% * -1.732 / 2.5)) rotateY(-90deg); background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/61/Emojione_1F642.svg'); background-size: 75%; background-repeat: no-repeat; background-position: 50% 95%; } .change { position: absolute; width: 15%; height: 0; padding-bottom: 15%; background-color: #b71c1c; top: 50%; right: 2.5%; transform: translateY(-50%); color: #fff; font-size: 3.5vw; border-radius: 2.5vw; text-align: center; font-family: monospace; } .change::before { content: 'touch & hold'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .change:active ~ .perspective > .group > .right { animation-play-state: running; } @keyframes r-a { 0.000% { transform: rotateY(0deg); } 8.333%, 16.667% { transform: rotateY(60deg); } 25.000%, 33.333% { transform: rotateY(120deg); } 41.667%, 50.000% { transform: rotateY(180deg); } 58.333%, 66.667% { transform: rotateY(240deg); } 75.000%, 83.333% { transform: rotateY(300deg); } 91.667%, 100.000% { transform: rotateY(360deg); } } * { user-select: none; } /*showcase*/ .showcase { position: fixed; top: 2.5vw; right: 2.5vw; z-index: 999999; font-size: 3vw; font-family: monospace; }