kumarldh/dr-strange.html

## dr-strange.html
<!DOCTYPE html>
<html>
<head>
<title>JLT - Animated squares on top of a circle</title>
<style>
body{
	padding: 300px;
}
div{
	position: absolute;
}
.square{
	width: 200px;
	height: 200px;
	border: 1px solid #0F0;
}
.rounded{
	border-radius: 50%;
}
.deg45{
	transform: rotate(45deg);
}
.rcw{
	animation: rotationcw 3s infinite linear;
}
.rccw{
	animation: rotationccw 3s infinite linear;
}
@keyframes rotationcw {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
@keyframes rotationccw {
	from {
		transform: rotate(359deg);
	}
	to {
		transform: rotate(0deg);
	}
}
</style>
</head>
<body>
<div class="square rccw"></div>
<div class="square deg45 rcw"></div>
<div class="square rounded"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>JLT - Animated squares on top of a circle</title>
	<style>
	body{
	padding: 300px;
	}
	div{
	position: absolute;
	}
	.square{
	width: 200px;
	height: 200px;
	border: 1px solid #0F0;
	}
	.rounded{
	border-radius: 50%;
	}
	.deg45{
	transform: rotate(45deg);
	}
	.rcw{
	animation: rotationcw 3s infinite linear;
	}
	.rccw{
	animation: rotationccw 3s infinite linear;
	}
	@keyframes rotationcw {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(359deg);
	}
	}
	@keyframes rotationccw {
	from {
	transform: rotate(359deg);
	}
	to {
	transform: rotate(0deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="square rccw"></div>
	<div class="square deg45 rcw"></div>
	<div class="square rounded"></div>
	</body>
	</html>