.flower {
	position:relative;
	width:350px;
	height:350px;
	left:10%;
	top:10%;
	transform:translate(-50%,50%);
	animation:rolate 1.3s linear infinite;
	transform-origin:34.3% 50.8%;
}
.flower .petal {
	display:block;
	width:120px;
	height:120px;
	background:#9b59b6;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.flower .petal1 {
	transform:rotate(51.4deg);
	display:block;
	width:120px;
	height:120px;
	background:#3498db;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.flower .petal2 {
	transform:rotate(102.8deg);
	display:block;
	width:120px;
	height:120px;
	background:#8BC34A;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.flower .petal3 {
	transform:rotate(154.28deg);
	display:block;
	width:120px;
	height:120px;
	background:#FFC312;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.flower .petal4 {
	transform:rotate(205.7deg);
	display:block;
	width:120px;
	height:120px;
	background:#FDA7DF;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.flower .petal5 {
	transform:rotate(257.14deg);
	display:block;
	width:120px;
	height:120px;
	background:#EE5A24;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.flower .petal6 {
	transform:rotate(308.54deg);
	display:block;
	width:120px;
	height:120px;
	background:#fd79a8;
	border-radius:0 120px;
	position:absolute;
	transform-origin:100% 100%;
}
.circle {
	width:60px;
	height:60px;
	background:#fff200;
	background-image:radial-gradient(at 20% 30%,#fffa65,#f1c40f,#e67e22);
	border-radius:100%;
	position:relative;
	left:50%;
	top:50%;
	transform:translate(-135%,-43%);
	z-index:10;
}
@keyframes rolate {
	from {
	transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}