Pure CSS, multiple halves rotated at center point

：

HTML code:

1 <Divstyle= "background: #000; position:relative; width:300px; height:300px;">2     <imgsrc= "Http://res1.eqh5.com/o_1b8g6r3aa1l0s1ap250p11bk51gq.png?imageMogr2/thumbnail/721x721&gt;/strip"style= "padding:9%;width:82%; animation:rotatein 3.5s ease 0s infinite both;">3     <imgsrc= "Http://res1.eqh5.com/o_1b8g6r3aa1l0s1ap250p11bk51gq.png?imageMogr2/thumbnail/642x642&gt;/strip"style= "width:73%; padding:13.5%; Animation:rotatein 4s ease 0s infinite both; ">4     <imgsrc= "Http://res1.eqh5.com/o_1b8g6q6om18tapg81ga4bvj3i8a.png?imageMogr2/thumbnail/642x642&gt;/strip"style= "width:73%;  padding:13.5%; Animation:rotatein 2s ease 0s infinite both; "> 5     <imgsrc= "Http://res1.eqh5.com/o_1b8g6r3aa1l0s1ap250p11bk51gq.png?imageMogr2/thumbnail/761x761&gt;/strip" style= "width:86.5%;  padding:6.75%; Animation:rotatein 6.5s ease 0s infinite both; ">6 </Div>

CSS code:

@-webkit-keyframes rotatein{from{-webkit-transform:rotate (0)}to{-webkit-transform:rotate (360deg)}} img{position: absolute;top:0px; left:0px;}

Material:

Pure CSS, multiple halves rotated at center point