پیشنمایش زنده
کد HTML
<div class="container">
<div class="pane">
<label class="label">
<span>Yes</span>
<input id="left" class="input" name="radio" type="radio">
</label>
<label class="label">
<span>No</span>
<input id="middle" class="input" checked="checked" name="radio" type="radio">
</label>
<label class="label">
<span>Idk</span>
<input id="right" class="input" name="radio" type="radio">
</label>
<span class="selection"></span>
</div>
</div>
کد CSS
.container {
transform-style: preserve-3d;
perspective: 1000px;
}
.pane {
outline: 2px solid #00ff6a;
box-shadow: 0 0 10px #00ff6a77, inset 0 0 10px #00ff6a77;
height: 1cm;
width: 4.5cm;
border-radius: 5px;
position: relative;
overflow: hidden;
transition: 0.7s ease;
}
.input {
display: none;
}
.label {
height: 1cm;
width: 1.5cm;
float: left;
font-weight: 600;
letter-spacing: -1px;
font-size: 14px;
padding: 0px;
position: relative;
z-index: 1;
color: #00ff6a;
text-align: center;
padding-top: 10px;
}
.selection {
display: none;
position: absolute;
height: 1cm;
width: calc(4.5cm / 3);
z-index: 0;
left: 0;
top: 0;
box-shadow: 0 0 10px #00ff6a77;
transition: .15s ease;
}
.label:has(input:checked) {
color: #212121;
}
.pane:has(.label:nth-child(1):hover) {
transform: rotateY(-30deg);
}
.pane:has(.label:nth-child(3):hover) {
transform: rotateY(35deg);
}
.label:has(input:checked) ~ .selection {
background-color: #00ff6a;
display: inline-block;
}
.label:nth-child(1):has(input:checked) ~ .selection {
transform: translateX(calc(4.5cm * 0/3));
}
.label:nth-child(2):has(input:checked) ~ .selection {
transform: translateX(calc(4.5cm * 1/3));
}
.label:nth-child(3):has(input:checked) ~ .selection {
transform: translateX(calc(4.5cm * 2/3));
}