なんかよくわからないスイッチ的なあれ.html

<input type=checkbox id=switch><label for=switch><div></div><div></div></label><style>:root{--p:480px}html,body{height:100%}body{align-items:center;background:#202224;display:flex;justify-content:center;margin:0}input[type=checkbox]{display:none}input[type=checkbox]+label{display:inline-grid;grid:1fr/repeat(2,1fr);height:24px;width:64px}input[type=checkbox]+label>::before,input[type=checkbox]+label>::after{background:#e0eefd;content:'';height:24px;position:absolute;width:32px;transition:all.25s ease}input[type=checkbox]+label>::before{transform-origin:left}input[type=checkbox]+label>::after{transform-origin:right}input[type=checkbox]+label>:first-child::before{transform:perspective(var(--p))rotateY(-90deg)scaleX(0);filter:brightness(.5)}input[type=checkbox]:checked+label>:first-child::before{transform:perspective(var(--p))rotateY(-75deg)scaleX(1);filter:brightness(.75)}input[type=checkbox]+label>:first-child::after{transform:perspective(var(--p))rotateY(0);filter:brightness(1)}input[type=checkbox]:checked+label>:first-child::after{transform:perspective(var(--p))rotateY(45deg);filter:brightness(.875)}input[type=checkbox]+label>:last-child::before{transform:perspective(var(--p))rotateY(0);filter:brightness(1)}input[type=checkbox]:not(:checked)+label>:last-child::before{transform:perspective(var(--p))rotateY(-45deg);filter:brightness(.875)}input[type=checkbox]+label>:last-child::after{transform:perspective(var(--p))rotateY(90deg)scaleX(0);filter:brightness(.5)}input[type=checkbox]:not(:checked)+label>:last-child::after{transform:perspective(var(--p))rotateY(75deg)scaleX(1);filter:brightness(.75)}</style>