Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вращение div-ов по периметру круга (https://javascript.ru/forum/xhtml-html-css/65515-vrashhenie-div-ov-po-perimetru-kruga.html)

Black_Star 23.10.2016 16:07

Вращение 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"

ksa 24.10.2016 08:20

Цитата:

Сообщение от Black_Star
можно ли на CSS реализовать вращение группы дивов по периметру круга

Может поможет...
http://blog.sklazer.com/789.html

MallSerg 24.10.2016 11:01

Цитата:

Сообщение от Black_Star
можно ли на CSS реализовать вращение группы дивов

<!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>

Black_Star 24.10.2016 21:37

Спасибо за советы, но что-то с непарным количеством дивов + если тот див что их обедняет имеет отношение сторон не 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>

рони 24.10.2016 22:04

Black_Star,
когда run научитесь добавлять?
http://javascript.ru/formatting.

Black_Star 25.10.2016 09:07

Цитата:

Сообщение от рони
когда run научитесь добавлять?
http://javascript.ru/formatting.

Спасибо, принял к сведению


Часовой пояс GMT +3, время: 09:37.