<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

External CSS

  1. https://codepen.io/thebabydino/pen/ZJgeQK.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.