<input type='checkbox' id='shift'/>
<label for='shift'>shifted and squished</label>
<div class='box'></div>
$d: 5em;
.box {
width: $d; height: $d;
transform: translatex(calc((1 - var(--f, 0))*100vw)) scalex(var(--f));
background: #f90;
transition: transform .3s ease-in;
:checked ~ & { --f: .5 }
}
/* prettifying touches */
label {
margin: 1em;
#shift + &:before { content: '' }
#shift:checked + &:before { content: '✔' }
}
View Compiled
This Pen doesn't use any external JavaScript resources.