Untitled

dabblet.css

.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
	left: 0;
	margin: 0 0 10px;
}
.test2 {
	transform: rotate(0.0001deg);
}
.test2:hover {
	transform: translate(20px, 0) rotate(0.0001deg);
}
.test:hover {
	transform: translate(20px, 0);
}

dabblet.html

<div class="test"></div>
<div class="test2"></div>
Hover over each circle. The first transitions 'translate', the second transitions 'translate' and a small 'rotate'.

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}