Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2016, 16:07
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Вращение 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"
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2016, 08:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Black_Star
можно ли на CSS реализовать вращение группы дивов по периметру круга
Может поможет...
http://blog.sklazer.com/789.html
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2016, 11:01
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2016, 21:37
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

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

Последний раз редактировалось Black_Star, 25.10.2016 в 09:07.
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2016, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Black_Star,
когда run научитесь добавлять?
http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2016, 09:07
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
Показать div при наведении / jQuery updaite Элементы интерфейса 4 28.07.2014 03:45
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 03:41
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
div с фоновыми по периметру Артем125 Элементы интерфейса 3 11.06.2010 15:19