<!-- Code to handle the camera angle -->
<input tabindex="-1" type="radio" name="cam" id="cam1" />
<input tabindex="-1" type="radio" name="cam" id="cam2" />
<input tabindex="-1" type="radio" name="cam" id="cam3" />
<input tabindex="-1" type="radio" name="cam" id="cam4" />
<input tabindex="-1" type="radio" name="cam" id="cam5" />
<input tabindex="-1" type="radio" name="cam" id="cam6" checked />
<input tabindex="-1" type="radio" name="cam" id="cam7" />
<input tabindex="-1" type="radio" name="cam" id="cam8" />
<input tabindex="-1" type="radio" name="cam" id="cam9" />
<div id="camera">
<label for="cam1"></label>
<label for="cam2"></label>
<label for="cam3"></label>
<label for="cam4"></label>
<label for="cam5"></label>
<label for="cam6"></label>
<label for="cam7"></label>
<label for="cam8"></label>
<label for="cam9"></label>
</div>
<article id="snes-gamepad" aria-label="SNES controller">
<!-- cord -->
<div id="cord"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<!-- Buttons on top-->
<button id="l" class="is3d">Top left<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></button>
<button id="r" class="is3d">Top Right<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></button>
<!-- frame -->
<div class="face is3d"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<!-- Letters and Text -->
<h1>SUPER NINTENDO</h1>
<p>CSS ENTERTAINMENT SYSTEM</p>
<p class="letter letter-x" aria-hidden="true">X</p>
<p class="letter letter-y" aria-hidden="true">Y</p>
<p class="letter letter-a" aria-hidden="true">A</p>
<p class="letter letter-b" aria-hidden="true">B</p>
<p class="letter-start" aria-hidden="true">START</p>
<p class="letter-select" aria-hidden="true">SELECT</p>
<!-- directional buttons + axis -->
<button id="up">Up</button>
<button id="left">Left</button>
<button id="right">Right</button>
<button id="down">Down</button>
<div class="axis is3d"><div style="--z:1"></div><div style="--z:2"></div><div style="--z:3"></div><div style="--z:4"></div><div style="--z:5"></div><div style="--z:6"></div></div>
<!-- Menu buttons (start/select) -->
<button id="select" class="is3d">Select<div style="--z:1"></div><div style="--z:2"></div><div style="--z:3"></div><div style="--z:4"></div></button>
<button id="start" class="is3d">Start<div style="--z:1"></div><div style="--z:2"></div><div style="--z:3"></div><div style="--z:4"></div></button>
<!-- Action buttons -->
<div class="buttons">
<button id="x" class="circle is3d">x<div></div><div></div><div></div><div></div></button>
<button id="y" class="circle is3d">y<div></div><div></div><div></div><div></div></button>
<button id="a" class="circle is3d">a<div></div><div></div><div></div><div></div></button>
<button id="b" class="circle is3d">b<div></div><div></div><div></div><div></div></button>
</div>
</article>
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
body {
--angle: 35deg;
margin: 0;
height: 100vh;
perspective: 1500px;
overflow: hidden;
font-family: Teko, Helvetica, Arial, sans-serif;
font-size: 3vmin;
}
*:focus {
outline: 0.25vmin dashed red;
outline-offset: 0.5vmin;
}
/* Camera angle */
input[type="radio"] {
position: absolute;
left: -1000in;
}
#cam1:checked ~ #snes-gamepad { --x: -1; --y: 1; }
#cam2:checked ~ #snes-gamepad { --x: -1; }
#cam3:checked ~ #snes-gamepad { --x: -1; --y: -1; }
#cam4:checked ~ #snes-gamepad { --y: 1; }
#cam6:checked ~ #snes-gamepad { --y: -1; }
#cam7:checked ~ #snes-gamepad { --x: 1; --y: 1; }
#cam8:checked ~ #snes-gamepad { --x: 1; }
#cam9:checked ~ #snes-gamepad { --x: 1; --y: -1; }
#cam1:checked ~ #camera label:nth-child(1),
#cam2:checked ~ #camera label:nth-child(2),
#cam3:checked ~ #camera label:nth-child(3),
#cam4:checked ~ #camera label:nth-child(4),
#cam5:checked ~ #camera label:nth-child(5),
#cam6:checked ~ #camera label:nth-child(6),
#cam7:checked ~ #camera label:nth-child(7),
#cam8:checked ~ #camera label:nth-child(8),
#cam9:checked ~ #camera label:nth-child(9) {
background: #f004;
mix-blend-mode: color-burn;
}
#camera {
--color1: #ccc;
position: absolute;
top: 2vmin;
right: 2vmin;
width: 10vmin;
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
background:
linear-gradient(#0000 0 30%, #fff 0 36.66%, #0000 0 63.33%, #fff 0 70%, #0000 0),
linear-gradient(90deg, #0000 0 30%, #fff 0 36.66%, #0000 0 63.33%, #fff 0 70%, #0000 0),
radial-gradient(closest-side, #ccc 33.33%, #0000 0 40%, #ccc 0 99.99%, #0000 0)
;
border-radius: 50%;
overflow: hidden;
gap: 0.125vmin;
}
/* Gamepad code */
#snes-gamepad {
--x: 0;
--y: 0;
--pos: 0.2vmin;
--rotate: rotate3d(var(--x), var(--y), 0, var(--angle));
--gray-light: #ccc;
--gray: #b5b5bb;
--gray-dark: #585a58;
--purple-light: #bbe;
--purple-dark: #64b;
--button-x: #3c62f8; var(--purple-light);
--button-y: #14b161; var(--purple-light);
--button-a: #f03025; var(--purple-dark);
--button-b: #e9dd34; var(--purple-dark);
position: absolute;
width: 80vmin;
height: 34vmin;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) var(--rotate);
transform-style: preserve-3d;
transition: transform 1s;
}
#snes-gamepad * {
position: absolute;
box-sizing: border-box;
transform-style: preserve-3d;
}
.is3d > div {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.is3d > div:nth-child(1) { transform: translateZ(calc(var(--pos) * 1)); }
.is3d > div:nth-child(2) { transform: translateZ(calc(var(--pos) * 2)); }
.is3d > div:nth-child(3) { transform: translateZ(calc(var(--pos) * 3)); }
.is3d > div:nth-child(4) { transform: translateZ(calc(var(--pos) * 4)); }
.is3d > div:nth-child(5) { transform: translateZ(calc(var(--pos) * 5)); }
.is3d > div:nth-child(6) { transform: translateZ(calc(var(--pos) * 6)); }
.is3d > div:nth-child(7) { transform: translateZ(calc(var(--pos) * 7)); }
.is3d > div:nth-child(8) { transform: translateZ(calc(var(--pos) * 8)); }
.is3d > div:nth-child(9) { transform: translateZ(calc(var(--pos) * 9)); }
.is3d > div:nth-child(10) { transform: translateZ(calc(var(--pos) * 10)); }
.is3d > div:nth-child(11) { transform: translateZ(calc(var(--pos) * 11)); }
.is3d > div:nth-child(12) { transform: translateZ(calc(var(--pos) * 12)); }
button {
border: 0;
color: transparent;
background: transparent;
padding: 0;
transform-style: preserve-3d;
}
button.active, /* gamepad controlled */
button:active {
--pos: 0.05;
}
/* general frame */
.face,
.face div {
--pos: -0.7vmin;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
/* buttons circle */
radial-gradient(closest-side, #0000 97%, #fff2 99%, #0000 0) 48vmin 2vmin / 30vmin 30vmin no-repeat,
radial-gradient(closest-side, var(--gray) 99%, #0002 99.8%, #0000 100%) 48vmin 2vmin / 30vmin 30vmin no-repeat,
/* axis circle */
radial-gradient(farthest-side at 100% 50%, #0000 94%, #00000002 99.9%, #0000 0) 7.5vmin 7.5vmin / 9.5vmin 19vmin no-repeat,
radial-gradient(farthest-side at 1vmin 50%, #0000 96%, #ffffff1f 99.9%, #0000 0) 16vmin 7.5vmin / 10.5vmin 19vmin no-repeat,
radial-gradient(farthest-side, #0000 80%, #00000004 99.9%, #0000 0) 7.5vmin 7.5vmin / 19vmin 19vmin no-repeat,
/* general shape */
radial-gradient(circle at 17vmin 17vmin, var(--gray-light) 16.95vmin, #0000 17vmin),
radial-gradient(circle at 63vmin 17vmin, var(--gray-light) 16.95vmin, #0000 17vmin),
linear-gradient(#0000, #fff2 0.01%, #0000 2% 98%, #0001) 50% 0 / 46vmin 30vmin no-repeat,
linear-gradient(var(--gray-light) 0 0) 50% 0 / 46vmin 30vmin no-repeat;
pointer-events: none;
}
.face div {
filter: contrast(0.9);
background:
radial-gradient(circle at 17vmin 17vmin, var(--gray-light) 16.9vmin, #0000 17vmin),
radial-gradient(circle at 63vmin 17vmin, var(--gray-light) 16.9vmin, #0000 17vmin),
linear-gradient(var(--gray-light) 0 0) 50% 0 / 46vmin 30vmin no-repeat;
}
/* Text (all) */
h1 {
top: 3.5vmin;
left: 45%;
margin: 0;
transform: translate(-50%, 0%);
font-size: 4vmin;
font-style: italic;
color: var(--gray-dark);
font-weight: 300;
}
h1 + p {
background: var(--gray-dark);
color: var(--gray-light);
margin: 0;
padding: 0vmin 0.75vmin;
line-height: 3vmin;
height: 2.5vmin;
font-style: italic;
font-size: 1.66vmin;
top: 8vmin;
left: 45.25%;
transform: translate(-50%, 0);
letter-spacing: 0.2vmin;
}
.letter {
color: var(--gray-light);
font-style: italic;
font-size: 3.75vmin;
transform: skew(3deg);
line-height: 0;
}
.letter-a { top: 28%; left: 92.9%; }
.letter-b { top: 69%; left: 71.25%; }
.letter-x { top: 11%; left: 83.5%; }
.letter-y { top: 52%; left: 62%; }
/* Top buttons */
#l, #r {
--pos: -0.2vmin;
width: 17.25vmin;
height: 5vmin;
top: -1.5vmin;
left: 8.75vmin;
background:
linear-gradient(#fff0, #fff6),
var(--gray-light);
border-radius: 55% 1vmin 0 0;
box-shadow:
inset 0 0.125vmin 0.25vmin #0002,
inset 0 2.5vmin 0.5vmin -1vmin var(--gray-light),
inset 0 3vmin 1vmin -1vmin #0004;
transform: translateZ(-2.75vmin);
}
#l div,
#r div {
box-shadow:
inset 0 0.125vmin 0.25vmin #0002,
inset 0 2.5vmin 0.5vmin -1vmin var(--gray-light),
inset 0 3vmin 1vmin -1vmin #0004;
border-radius: 55% 1vmin 0 0;
}
#l.active, /* gamepad js */
#l:active {
box-shadow:
inset 0 0.125vmin 0.25vmin #0002,
inset 0 2.5vmin 0.75vmin -1.66vmin var(--gray-light),
inset 0 3vmin 1vmin -1vmin #0004;
transform: translateZ(-2.75vmin) translateY(1vmin);
}
#r {
top: -1.5vmin;
left: auto;
right: 8.75vmin;
transform: scaleX(-1) translateZ(-2.75vmin);
}
#r.active, /* gamepad js */
#r:active {
box-shadow:
inset 0 0.125vmin 0.25vmin #0002,
inset 0 2.5vmin 0.75vmin -1.66vmin var(--gray-light),
inset 0 3vmin 1vmin -1vmin #0004;
transform: scaleX(-1) translateZ(-2.75vmin) translateY(1vmin);
}
/* axis */
.axis, .axis div {
--color: #111;
background:
linear-gradient(#0000 31%, #000c 33.33% 66.66%, #0000 70%),
linear-gradient(90deg, #0000 31%, #000c 33.33% 66.66%, #0000 70%)
;
width: 13.5vmin;
aspect-ratio: 1;
top: 9.75vmin;
left: 10.5vmin;
pointer-events: none;
box-shadow:
-4.5vmin 0 0.25vmin -4.4vmin #000c,
4.5vmin 0 0.25vmin -4.4vmin #000c,
0 -4.5vmin 0.25vmin -4.4vmin #000c,
0 4.5vmin 0.25vmin -4.4vmin #000c
}
.axis div {
--color: #34393a; #333;
--shadows:
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 36.66% 0% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 62.66% 0% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 36.66% 100% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 62.66% 100% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 0 36.66% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 0 62.66% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 100% 36.66% / 10% 10% no-repeat,
radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 100% 62.66% / 10% 10% no-repeat,
linear-gradient(var(--color) 0 0) 50% 50% / 100% 26.66% no-repeat,
linear-gradient(var(--color) 0 0) 50% 50% / 26.66% 100% no-repeat,
linear-gradient(var(--color) 0 0) 50% 50% / 93.33% 33.33% no-repeat,
linear-gradient(var(--color) 0 0) 50% 50% / 33.33% 93.33% no-repeat;
top: 0;
left: 0;
box-shadow: none;
background:
var(--shadows)
;
}
.axis div:last-of-type {
--color: #3a4448;#3a3a3a;
background:
linear-gradient(#fff1, #fff0 20% 80%, #fff1),
linear-gradient(90deg, #fff1, #fff0 20% 80%, #fff1),
var(--shadows)
;
/* width: 13.5vmin; */
box-shadow:
inset 0 0 2vmin -0.5vmin #0009,
inset -4.5vmin -4.5vmin 3vmin #2102,
inset 4.5vmin 4.5vmin 3vmin #ffff0005
;
clip-path: polygon(33.33% 0, 66.66% 0, 66.66% 33.33%, 100% 33.33%, 100% 66.66%, 66.66% 66.66%, 66.66% 100%, 33.33% 100%, 33.33% 66.66%, 0 66.66%, 0 33.33%, 33.33% 33.33%);
mask: var(--shadows);
mask: var(--shadows)
}
.axis div:last-of-type::before {
content: "";
position: absolute;
width: 25%;
aspect-ratio: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:
radial-gradient(#0000, #0002);
box-shadow:
/* inset 1vmin 1vmin 1vmin -0.5vmin #0002, */
inset -0.25vmin 0 0.5vmin #28282855,
inset 0 0 1vmin 0.25vmin #28282855,
inset -1vmin -0.25vmin 0.5vmin -0.25vmin #ffffff11
;
border-radius: 50%;
opacity: 0.9;
}
#up, #right, #left, #down {
width: 4.5vmin;
height: 4.5vmin;
}
#up { top: 9.75vmin; left: 15vmin; }
#left { top: 14.25vmin; left: 10.5vmin; }
#right { top: 14.25vmin; left: 19.5vmin; }
#down { top: 18.75vmin; left: 15vmin; }
#up.active ~ .axis div, /* gamepad js */
#up:active ~ .axis div {
transform-origin: 50% 100%;
transform: translateZ(calc(var(--pos) * var(--z))) rotateX(5deg);
}
#down.active ~ .axis div, /* gamepad js */
#down:active ~ .axis div{
transform-origin: 50% 0%;
transform: translateZ(calc(var(--pos) * var(--z))) rotateX(-5deg);
}
#left.active ~ .axis div, /* gamepad js */
#left:active ~ .axis div{
transform-origin: 100% 50%;
transform: translateZ(calc(var(--pos) * var(--z))) rotateY(-5deg);
}
#right.active ~ .axis div, /* gamepad js */
#right:active ~ .axis div{
transform-origin: 0% 50%;
transform: translateZ(calc(var(--pos) * var(--z))) rotateY(5deg);
}
/* Menu buttons */
#select,
#start {
width: 6vmin;
height: 2vmin;
border-radius: 2.5vmin;
background: #444;
transform: translate(-50%, -50%) rotate(-35deg);
top: 19.5vmin;
left: 32.5vmin;
box-shadow:
0 0 0 0.2vmin #0007,
/* 0 0 0.3vmin 0.1vmin #0008, */
0 0 0.3vmin 0.1vmin #fff4,
0 0 0 0.2vmin #0002,
0 0.5vmin 0.5vmin #0004;
}
#start {
left: 41vmin;
}
button#start.is3d div,
button#select.is3d div {
--color: #222;
top 0;
left: 0
width: 100%;
height: 100%;
transform: translateZ(calc(var(--pos) * var(--z))) scale(calc(1 - var(--z) * 0.03));
border-radius: 2.5vmin;
background: #444;
box-shadow:
inset 0 0 0.5vmin var(--color),
inset 2.25vmin 2.25vmin 0.5vmin -2.25vmin #fff2,
inset -2.25vmin -0.5vmin 1vmin -2.25vmin #fff2,
inset -2.25vmin -0.5vmin 1.5vmin #fff1,
inset 0.5vmin 1vmin 0.5vmin #0002,
inset 1vmin 0vmin 0.5vmin #0002,
inset -1.5vmin -1vmin 2vmin -0.5vmin #2583,
inset -1vmin -0.5vmin 0.5vmin #fff3
}
#start div {
box-shadow:
inset 0 0 0.5vmin var(--color),
inset 2.25vmin 2.25vmin 0.5vmin -2.25vmin #fff2,
inset 0.5vmin 1vmin 0.5vmin #0002,
inset 1vmin 0vmin 0.5vmin #0002,
inset -1.5vmin -1vmin 2vmin -0.5vmin #2583,
inset -1vmin -0.5vmin 0.5vmin #fff3
}
#start:active div,
#select:active div {
transform: translateZ(calc(var(--pos) * var(--z))) scale(calc(1 - var(--z) * 0.03));
}
.letter-start,
.letter-select {
color: var(--gray);
font-size: 2vmin;
transform: translate(-50%, 0);
filter: brightness(0.8);
top: 60%;
font-style: italic;
letter-spacing: 0.15vmin;
}
.letter-start { left: 41vmin; }
.letter-select { left: 32.5vmin; }
/* Action buttons */
button.circle,
button.circle div {
--shadow:
inset 0 0 0 0.25vmin var(--color),
inset 2.25vmin 2.25vmin 0.5vmin -2.25vmin #fff8,
inset -2.25vmin -0.5vmin 1vmin -2.25vmin #fff8,
inset -2.25vmin -0.5vmin 1.5vmin #fff2,
inset 0.5vmin 1vmin 0.5vmin #0001,
inset 1vmin 0vmin 0.5vmin #0001,
inset -1.5vmin -1vmin 2vmin -0.5vmin #2583,
inset -1vmin -0.5vmin 0.5vmin #fff3
;
width: 6vmin;
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--color);
z-index: 2;
box-shadow:
0 0 0 0.25vmin #0002,
0 0 0.3vmin 0.1vmin #0008,
0 0 0.3vmin 0.1vmin #fff4,
0 0 0 0.2vmin #0002,
var(--shadow);
}
button.circle div {
box-shadow:
0 0 0 0.25vmin #0002,
0 0 0.3vmin 0.1vmin #fff4,
0 0 0 0.2vmin #0001,
var(--shadow);
}
#x {
top: 9vmin;
left: 14.75vmin;
--color: var(--button-x);
}
#y {
top: 15vmin;
left: 7.125vmin;
--color: var(--button-y);
}
#a {
top: 15vmin;
right: 1.5vmin;
--color: var(--button-a);
}
#b {
top: 21vmin;
left: 14.75vmin;
--color: var(--button-b);
}
.buttons {
width: 30vmin;
height: 30vmin;
border-radius: 50%;
right: 2vmin;
top: 2vmin;
box-shadow:
0vmin 0vmin 1vmin 1.4vmin var(--gray-light),
1.25vmin 1vmin 1vmin 0vmin #fffc,
1.25vmin -1vmin 1vmin 0vmin #fffa;
border: 1px solid #0001;
}
.buttons::before,
.buttons::after {
content: "";
position: absolute;
border-radius: 10vmin;
transform: rotate(-38deg);
width: 17.75vmin;
height: 7.75vmin;
background: var(--gray-light);
z-index: 1;
top: 8.1vmin;
left: 2.05vmin;
box-shadow:
inset 0 0 0 0.125vmin #0003,
inset 0 0 0 0.25vmin #fff2
}
.buttons::after {
top: 14.05vmin;
left: 9.75vmin;
}
/* cord */
#cord {
width: 2vmin;
aspect-ratio: 1;
background: var(--gray-dark);
border-radius: 50%;
left: 50%;
top: 0;
transform-origin: 50% 0%;
transform: translate(-50%, 0) rotateX(-90deg) translate(0, 3vmin);
box-shadow:
0 0 1vmin 0.2vmin #000c,
0 0 0 1.5vmin var(--gray-light)
;
outline: 0.0625vmin solid #0001;
outline-offset: 1.5vmin;
}
#cord div {
width: 100%;
height: 600%;
background: linear-gradient(#585a58, #585a5888 20%, #585a5800);
top: 50%;
transform-origin: 50% 0%;
transform: rotateX(-90deg);
}
#cord div:nth-child(1) { transform: rotateX(-90deg) rotateY(calc(1 * 36deg)); }
#cord div:nth-child(2) { transform: rotateX(-90deg) rotateY(calc(2 * 36deg)); }
#cord div:nth-child(3) { transform: rotateX(-90deg) rotateY(calc(3 * 36deg)); }
#cord div:nth-child(4) { transform: rotateX(-90deg) rotateY(calc(4 * 36deg)); }
#cord div:nth-child(5) { transform: rotateX(-90deg) rotateY(calc(5 * 36deg)); }
#cord div:nth-child(6) { transform: rotateX(-90deg) rotateY(calc(6 * 36deg)); }
#cord div:nth-child(7) { transform: rotateX(-90deg) rotateY(calc(7 * 36deg)); }
#cord div:nth-child(8) { transform: rotateX(-90deg) rotateY(calc(8 * 36deg)); }
#cord div:nth-child(9) { transform: rotateX(-90deg) rotateY(calc(9 * 36deg)); }
#cord div:nth-child(10) { transform: rotateX(-90deg) rotateY(calc(10 * 36deg)); }
import gamecontrollerJs from "https://cdn.skypack.dev/gamecontroller.js@1.5.0";
function toggleClass(el, val) {
document.getElementById(el).classList.toggle("active", val)
}
gameControl.on('connect', function(gamepad) {
const buttonMap = {
"button0": "b",
"button1": "a",
"button2": "y",
"button3": "x",
"button4": "l",
"button5": "r",
"button8": "select",
"button9": "start"
};
for (const property in buttonMap) {
gamepad.on(property, function() { toggleClass(buttonMap[property], true) })
.after(property, function() { toggleClass(buttonMap[property], false) });
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.