This post is saved as a draft.
#212121
1.container { 2 transform-style: preserve-3d; 3 perspective: 1000px; 4} 5 6.pane { 7 outline: 2px solid #00ff6a; 8 box-shadow: 0 0 10px #00ff6a77, inset 0 0 10px #00ff6a77; 9 height: 1cm; 10 width: 4.5cm; 11 border-radius: 5px; 12 position: relative; 13 overflow: hidden; 14 transition: 0.7s ease; 15} 16 17.input { 18 display: none; 19} 20 21.label { 22 height: 1cm; 23 width: 1.5cm; 24 float: left; 25 font-weight: 600; 26 letter-spacing: -1px; 27 font-size: 14px; 28 padding: 0px; 29 position: relative; 30 z-index: 1; 31 color: #00ff6a; 32 text-align: center; 33 padding-top: 10px; 34} 35 36.selection { 37 display: none; 38 position: absolute; 39 height: 1cm; 40 width: calc(4.5cm / 3); 41 z-index: 0; 42 left: 0; 43 top: 0; 44 box-shadow: 0 0 10px #00ff6a77; 45 transition: .15s ease; 46} 47 48.label:has(input:checked) { 49 color: #212121; 50} 51 52.pane:has(.label:nth-child(1):hover) { 53 transform: rotateY(-30deg); 54} 55 56.pane:has(.label:nth-child(3):hover) { 57 transform: rotateY(35deg); 58} 59 60.label:has(input:checked) ~ .selection { 61 background-color: #00ff6a; 62 display: inline-block; 63} 64 65.label:nth-child(1):has(input:checked) ~ .selection { 66 transform: translateX(calc(4.5cm * 0/3)); 67} 68 69.label:nth-child(2):has(input:checked) ~ .selection { 70 transform: translateX(calc(4.5cm * 1/3)); 71} 72 73.label:nth-child(3):has(input:checked) ~ .selection { 74 transform: translateX(calc(4.5cm * 2/3)); 75}
Variation of aradio