Вращение div-ов по периметру круга
Добрый день уважаемый. Возник интерес можно ли на CSS реализовать вращение группы дивов по периметру круга может кто сталкивался?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> #field { position: relative; margin-top: 2%; width: 1200px; height: 500px; margin: 2%; border: 1px solid black; } .square { position: absolute; width: 100px; height: 100px; border: 1px solid black; background-color: red; z-index: 2; } .Circle { position: absolute; top: 15%; left: 30%; width: 350px; height: 350px; border-radius: 50%; z-index: 1; border: 1px solid black; } #field > div:nth-child(1) {top:0; left:41%;} #field > div:nth-child(2) {top:15%; left:57%;} #field > div:nth-child(3) {top:65%; left:57%;} #field > div:nth-child(4) {top:65%; left:25%;} #field > div:nth-child(5) {top:15%; left:25%;} .moveCircling { animation: Circling 4s linear infinite normal; } @keyframes Circling { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg)} /*Здесь должна быть правильная анимация если она возможна*/ } </style> <body> <div id="field"> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="Circle"></div> </div> </body> </html> Что надо прописать для класса что б @keyframes Circling вращало все дивы по периметру круга? (<div class="Circle"> привел для наглядности) По сути центр вращения дивов должен находиться в центре div class="Circle" |
Цитата:
http://blog.sklazer.com/789.html |
Цитата:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> @keyframes A_rotate { 0% { transform: rotate(360deg) } 100% { transform: rotate(0deg)} } @keyframes B_rotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg)} } .dick { position:relative; width:100px; height:100px; background:red; border-radius: 50%; box-shadow: 1px 1px 12px 2px rgba(0,0,0,1); animation: A_rotate 4s linear infinite normal; } .dick > div { position:absolute; width:30px; height:30px; background:blue; border-radius: 35%; color:white; font-size: 24px; text-align:center; box-shadow: 1px 1px 12px 2px rgba(0,0,0,1); animation: B_rotate 4s linear infinite normal; } .dick > div:nth-child(1){top:-15px;left:35px;} .dick > div:nth-child(2){top:0px;left:70px;} .dick > div:nth-child(3){top:35px;left:85px;} .dick > div:nth-child(4){top:70px;left:70px;} .dick > div:nth-child(5){top:85px;left:35px;} .dick > div:nth-child(6){top:70px;left:0px;} .dick > div:nth-child(7){top:35px;left:-15px;} .dick > div:nth-child(8){top:0px;left:0px;} </style> <body> <div class="dick"> <div>В</div> <div>о</div> <div>з</div> <div>м</div> <div>о</div> <div>ж</div> <div>н</div> <div>о</div> </div> </body> </html> |
Спасибо за советы, но что-то с непарным количеством дивов + если тот див что их обедняет имеет отношение сторон не 1:1 у меня эффект не очень хороший получился.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> #field { position: relative; margin-top: 2%; width: 1200px; height: 500px; margin: 2%; /*border: 1px solid black;*/ } .square { position: absolute; width: 100px; height: 100px; border: 1px solid black; background-color: red; z-index: 2; } .Circle { position: absolute; top: 15%; left: 30%; width: 350px; height: 350px; border-radius: 50%; z-index: 1; border: 1px solid black; } #field > div:nth-child(1) {top:0; left:41%;} #field > div:nth-child(2) {top:15%; left:57%;} #field > div:nth-child(3) {top:65%; left:57%;} #field > div:nth-child(4) {top:65%; left:25%;} #field > div:nth-child(5) {top:15%; left:25%;} #field { animation: Circling 4s linear infinite normal; } .moveCircling { animation: Circling 4s linear infinite normal; } @keyframes Circling { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg)} } </style> <body> <div id="field"> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="square moveCircling"></div> <div class="Circle"></div> </div> </body> </html> |
|
Цитата:
|
Часовой пояс GMT +3, время: 09:37. |