Arc movement

dabblet.css

/* Arc movement */

.wrapper {
	width: 500px;
	margin: 300px 0 0;
	transition: all 1s;
	transform-origin: 50% 50%;
}
.inner {
	display: inline-block;
	padding: 1em;
	transition: transform 1s;
	background: lime;
}
html:hover .wrapper {
	transform: rotate(180deg);
}
html:hover .inner {
	transform: rotate(-180deg);
}

dabblet.html

<div class="wrapper">
    <div class="inner">Hover me</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}