Вращение родительского Div's перемещает положение детей Div - PullRequest
Новая
       15

Вращение родительского Div's перемещает положение детей Div

0 голосов
/ 02 марта 2020

С трудом справляясь с преобразованием поворота, у меня есть таблица, которая вращается, для целей скрипки я отключил одно место.

Я создам новые фоновые изображения для каждой таблицы, я будет иметь 4 таблицы, одна будет таблицей 4, таблицей 3, таблицей 2 и таблицей 1.

Это будет один div с фоновым изображением, но пользователи смогут вращаться стол, пока они не получат его так, как они хотят.

Лучшее объяснение будет в этой скрипке. 

  $(document).ready(function()
  {
  
  var angle = [0, 90, 180, 270];

	var current = 0;
	
   $(document).on('click','.table > .rotateright',function(event)
	{
	   	var d = $(this).parents('.table').attr('degrees');
	   	d = parseInt(d);
	   	current = angle.indexOf(d);
	   	current++;
	   
	   	if(current == 4)
			{
				current = 0;
			}
	   
	   	var r = $(this).parents('.table').attr('table');
	   
	   	$(this).parents('.table').attr('degrees', angle[current]);
	   
	   	var rotatetable = '.'.concat(r, "background");
	   	    	   	   
	   $(rotatetable).css({
        '-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
        '-moz-transform'    : 'rotate(' + angle[current] + 'deg)',
        '-ms-transform'     : 'rotate(' + angle[current] + 'deg)',
        '-o-transform'      : 'rotate(' + angle[current] + 'deg)',
        'transform'         : 'rotate(' + angle[current] + 'deg)'
			});
   });

	
	$(document).on('click','.table > .rotateleft',function(event)
	{
		var d =	$(this).parents('.table').attr('degrees');
		d = parseInt(d);
	  current = angle.indexOf(d);
		current--;
		
		if(current == -1)
		{
			current = 3;
		}
		
	   var r = $(this).parents('.table').attr('table');
		
	   $(this).parents('.table').attr('degrees', angle[current]);

	   var rotatetable = '.'.concat(r, "background");
			   
	   $(rotatetable).css({
		  '-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
		  '-moz-transform'    : 'rotate(' + angle[current] + 'deg)',
		  '-ms-transform'     : 'rotate(' + angle[current] + 'deg)',
		  '-o-transform'      : 'rotate(' + angle[current] + 'deg)',
		  'transform'         : 'rotate(' + angle[current] + 'deg)'
		});
  });
});
.person 
{
	z-index:1000;
	font-size: 11px;
	cursor:default;
	text-align: left;
	line-height: 10px;
	color: #3A3AB1;
	font-weight: bold;
	margin-bottom: 8px;
	width: 25px;
	overflow: visible;
}

.person img 
{
    padding-right:5px; 
    margin-bottom:10px; 
    cursor: pointer; 
    height:28px;
    z-index: 900;  
}

.chair span {
	position: absolute;
	left: -29%;
	top: 27px;
	width: 42px;
	background-color: rgba(255, 255, 255, 0.43);
	text-align: center;
}

.chair {
	position: absolute;
	overflow: visible;
	width: 28px;
	margin: 0px;
	list-style-type: none;
	left: 11px;
	top: 12px;
	height: 33px;
	text-align: center;
	z-index: 3;
}

.rotateright {
	position: absolute;
	width: 16px;
	height: 16px !important;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	bottom: 0px;
	right: -4px;
	z-index: 3;
}

.rotateleft {
	position: absolute;
	width: 16px;
	height: 16px !important;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	bottom: 0px;
	left: 0px;
	z-index: 3;
}

.editdiv {
	position: absolute;
	width: 16px;
	height: 16px !important;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	top: 0px;
	right: -4px;
	color: black;
	font-weight: bold;
	z-index: 3;
}

.square4background {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/square4.png);
}

.square4 {
	cursor: move;
	width: 133px;
	height: 133px;
	position: absolute !important;
	font-size: 17px;
	font-weight: bold;
	color: #00f;
	border: 1px solid #ccc;
	border-radius: 6%;
	-moz-border-radius: 6%;
	-webkit-border-radius: 6%;
  }

.square41
{
	top: 5px;
	left: 58px;
}

.square42
{
	top: 51px;
	left: 102px;
}

.square43
{
	top: 96px;
	left: 58px;
  background-color:black;
}

.square44
{
	top: 51px;
	left: 13px;
}
<head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" table="square4" degrees="0">

  <div class="removet"></div>
  <div class="background square4background" style="transform: rotate(0deg);">
      <div id="square41" class="chair connect_lists square4child square41 ui-sortable" style="transform: rotate(0deg);">
    <div id="8" class="person" title="hello hello">
      <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/woman.png" title="hello hello">
      <span>hello</span>
     </div>
    </div>
  <div id="square42" class="chair connect_lists square4child square42 ui-sortable" style="transform: rotate(0deg);">
    <div id="6" class="person" title="test test">
      <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/woman.png" title="test test">
      <span>test</span>
    </div>
  </div>
  <div id="square43" class="chair connect_lists square4child square43  ui-sortable" style="transform: rotate(0deg);"></div>
 <div id="square44" class="chair connect_lists square4child square44 ui-sortable" style="transform: rotate(0deg);">
   <div id="2" class="person" title="Fiona Johnson">
     <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/bride.png" title="Fiona Johnson">
     <span>Fiona</span>
   </div>
 </div>
  </div>
  <span class="fa fa-edit editdiv"></span>
  <span class="fa fa-rotate-left rotateleft"></span>
  <span class="fa fa-rotate-right rotateright"></span>
</div>

https://jsfiddle.net/jeu69kgo/1/

Когда вы нажимаете правую кнопку поворота, родитель поворачивается и принимает детей с ним, что я и хочу, но изображение людей искажается из-за поворота, вы можете увидеть его в скрипке.

Поворот 90:

До поворота

Everything is normal

После поворота

Parent rotated 90 degrees

Обратите внимание, как изображение поворачивается вместе с родителем .

Я пытался противодействовать этому с помощью -ротации на детей, у меня есть скрипка с кодом здесь. 

  $(document).ready(function()
  {
  
  var angle = [0, 90, 180, 270];

	var current = 0;
	
   $(document).on('click','.table > .rotateright',function(event)
	{
	   	var d = $(this).parents('.table').attr('degrees');
	   	d = parseInt(d);
	   	current = angle.indexOf(d);
	   	current++;
	   
	   	if(current == 4)
			{
				current = 0;
			}
	   
	   	var r = $(this).parents('.table').attr('table');
	   
	   	$(this).parents('.table').attr('degrees', angle[current]);
	   
	   	var rotatetable = '.'.concat(r, "background");
	   	    	   	   
	   $(rotatetable).css({
        '-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
        '-moz-transform'    : 'rotate(' + angle[current] + 'deg)',
        '-ms-transform'     : 'rotate(' + angle[current] + 'deg)',
        '-o-transform'      : 'rotate(' + angle[current] + 'deg)',
        'transform'         : 'rotate(' + angle[current] + 'deg)'
			});
      
    $(this).parents('.table').find(".person").css({'-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
		  '-moz-transform'    : 'rotate(-' + angle[current] + 'deg)',
		  '-ms-transform'     : 'rotate(-' + angle[current] + 'deg)',
		  '-o-transform'      : 'rotate(-' + angle[current] + 'deg)',
		  'transform'         : 'rotate(-' + angle[current] + 'deg)'});
   });

	
	$(document).on('click','.table > .rotateleft',function(event)
	{
		var d =	$(this).parents('.table').attr('degrees');
		d = parseInt(d);
	  current = angle.indexOf(d);
		current--;
		
		if(current == -1)
		{
			current = 3;
		}
		
	   var r = $(this).parents('.table').attr('table');
		
	   $(this).parents('.table').attr('degrees', angle[current]);

	   var rotatetable = '.'.concat(r, "background");
			   
	   $(rotatetable).css({
		  '-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
		  '-moz-transform'    : 'rotate(' + angle[current] + 'deg)',
		  '-ms-transform'     : 'rotate(' + angle[current] + 'deg)',
		  '-o-transform'      : 'rotate(' + angle[current] + 'deg)',
		  'transform'         : 'rotate(' + angle[current] + 'deg)'
		});
    
    $(this).parents('.table').find(".person").css({'-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
		  '-moz-transform'    : 'rotate(+' + angle[current] + 'deg)',
		  '-ms-transform'     : 'rotate(+' + angle[current] + 'deg)',
		  '-o-transform'      : 'rotate(+' + angle[current] + 'deg)',
		  'transform'         : 'rotate(+' + angle[current] + 'deg)'});

  });
});
.person 
{
	z-index:1000;
	font-size: 11px;
	cursor:default;
	text-align: left;
	line-height: 10px;
	color: #3A3AB1;
	font-weight: bold;
	margin-bottom: 8px;
	width: 25px;
	overflow: visible;
}

.person img 
{
    padding-right:5px; 
    margin-bottom:10px; 
    cursor: pointer; 
    height:28px;
    z-index: 900;  
}

.chair span {
	position: absolute;
	left: -29%;
	top: 27px;
	width: 42px;
	background-color: rgba(255, 255, 255, 0.43);
	text-align: center;
}

.chair {
	position: absolute;
	overflow: visible;
	width: 28px;
	margin: 0px;
	list-style-type: none;
	left: 11px;
	top: 12px;
	height: 33px;
	text-align: center;
	z-index: 3;
}

.rotateright {
	position: absolute;
	width: 16px;
	height: 16px !important;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	bottom: 0px;
	right: -4px;
	z-index: 3;
}

.rotateleft {
	position: absolute;
	width: 16px;
	height: 16px !important;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	bottom: 0px;
	left: 0px;
	z-index: 3;
}

.editdiv {
	position: absolute;
	width: 16px;
	height: 16px !important;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	top: 0px;
	right: -4px;
	color: black;
	font-weight: bold;
	z-index: 3;
}

.square4background {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/square4.png);
}

.square4 {
	cursor: move;
	width: 133px;
	height: 133px;
	position: absolute !important;
	font-size: 17px;
	font-weight: bold;
	color: #00f;
	border: 1px solid #ccc;
	border-radius: 6%;
	-moz-border-radius: 6%;
	-webkit-border-radius: 6%;
  }

.square41
{
	top: 5px;
	left: 58px;
}

.square42
{
	top: 51px;
	left: 102px;
}

.square43
{
	top: 96px;
	left: 58px;
  background-color:black;
}

.square44
{
	top: 51px;
	left: 13px;
}
<head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" table="square4" degrees="0">

  <div class="removet"></div>
  <div class="background square4background" style="transform: rotate(0deg);">
      <div id="square41" class="chair connect_lists square4child square41 ui-sortable" style="transform: rotate(0deg);">
    <div id="8" class="person" title="hello hello">
      <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/woman.png" title="hello hello">
      <span>hello</span>
     </div>
    </div>
  <div id="square42" class="chair connect_lists square4child square42 ui-sortable" style="transform: rotate(0deg);">
    <div id="6" class="person" title="test test">
      <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/woman.png" title="test test">
      <span>test</span>
    </div>
  </div>
  <div id="square43" class="chair connect_lists square4child square43  ui-sortable" style="transform: rotate(0deg);"></div>
 <div id="square44" class="chair connect_lists square4child square44 ui-sortable" style="transform: rotate(0deg);">
   <div id="2" class="person" title="Fiona Johnson">
     <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/bride.png" title="Fiona Johnson">
     <span>Fiona</span>
   </div>
 </div>
  </div>
  <span class="fa fa-edit editdiv"></span>
  <span class="fa fa-rotate-left rotateleft"></span>
  <span class="fa fa-rotate-right rotateright"></span>
</div>

https://jsfiddle.net/jd08wvgo/2/

Это работает хорошо, однако человек немного изменился теперь больше не на сиденье, как показано на рисунке, как я могу сохранить div в том же положении, в каком оно было до его поворота, но все еще вращаться вместе с родителем и не двигаться немного при каждом повороте.

Negative Rotation

1 Ответ

1 голос
/ 02 марта 2020

Свойство стиля с помощью (градусы = "0", градусы = "90", градусы = "180", градусы = "270") для записи css стиль как [degrees="90"] .square41 {...} для набор позиционирования и фоновое изображение установлены на .square4background с помощью ::before Псевдоэлемента. Вы можете видеть в моем коде стиля.

Надеюсь, приведенный ниже фрагмент поможет вам. 

$(document).ready(function(){
  var angle = [0, 90, 180, 270];
  var current = 0;
  $(document).on('click','.table > .rotateright',function(event){
    var d = $(this).parents('.table').attr('degrees');
    d = parseInt(d);
    current = angle.indexOf(d);
    current++;
    if(current == 4){
     current = 0;
    }
    var r = $(this).parents('.table').attr('table');
    $(this).parents('.table').attr('degrees', angle[current]);
    var rotatetable = '.'.concat(r, "background");	   
    $(rotatetable).css({
      '-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
      '-moz-transform'    : 'rotate(' + angle[current] + 'deg)',
      '-ms-transform'     : 'rotate(' + angle[current] + 'deg)',
      '-o-transform'      : 'rotate(' + angle[current] + 'deg)',
      'transform'         : 'rotate(' + angle[current] + 'deg)'
    });
  });

	
  $(document).on('click','.table > .rotateleft',function(event){
   var d = $(this).parents('.table').attr('degrees');
   d = parseInt(d);
   current = angle.indexOf(d);
   current--;
   if(current == -1){
     current = 3;
   }
   var r = $(this).parents('.table').attr('table');
   $(this).parents('.table').attr('degrees', angle[current]);
   var rotatetable = '.'.concat(r, "background");   
   $(rotatetable).css({
     '-webkit-transform' : 'rotate(' + angle[current] + 'deg)',
     '-moz-transform'    : 'rotate(' + angle[current] + 'deg)',
     '-ms-transform'     : 'rotate(' + angle[current] + 'deg)',
     '-o-transform'      : 'rotate(' + angle[current] + 'deg)',
     'transform'         : 'rotate(' + angle[current] + 'deg)'
    });
  });
});
/*Main Container Dedign*/
.square4 {
  cursor: move;
  width: 133px;
  height: 133px;
  position: absolute !important;
  font-size: 17px;
  font-weight: bold;
  color: #00f;
  border: 1px solid #ccc;
  border-radius: 6%;
  -moz-border-radius: 6%;
  -webkit-border-radius: 6%;
  font-family: Arial, sans-serif;
}
/*Control Design*/
.rotateright {
  position: absolute;
  width: 16px;
  height: 16px !important;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  bottom: 0px;
  right: -4px;
  z-index: 3;
}
.rotateleft {
  position: absolute;
  width: 16px;
  height: 16px !important;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  bottom: 0px;
  left: 0px;
  z-index: 3;
}
.editdiv {
  position: absolute;
  width: 16px;
  height: 16px !important;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  top: 0px;
  right: -4px;
  color: black;
  font-weight: bold;
  z-index: 3;
}
.chair {
  position: absolute;
  overflow: visible;
  width: 28px;
  height: 36px;
  /*box-shadow: 0 0 0 1px red;*/
  margin: 0px;
  list-style-type: none;
  left: 11px;
  top: 12px;
  text-align: center;
  z-index: 3;
}
.person {
  z-index: 1000;
  cursor: default;
  text-align: center;
  overflow: visible;
}
.person img {
  display: block;
  margin: 0 auto;
  cursor: pointer; 
  height: 26px;
  z-index: 900;  
}
.person span{
  font-weight: bold;
  color: #3A3AB1;
  font-size: 11px;
  height: 10px;
  display: block;
}

.square4background {
  width: 100%;
  height: 100%;
  position: relative;
}
.square4background:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/square4.png);
}
[degrees="90"] .square4background:before,
[degrees="90"] .square41, [degrees="90"] .square42, 
[degrees="90"] .square43, [degrees="90"] .square44{
  transform: rotate(-90deg);
}
[degrees="180"] .square4background:before,
[degrees="180"] .square41, [degrees="180"] .square42,
[degrees="180"] .square43, [degrees="180"] .square44{
  transform: rotate(-180deg);
}
[degrees="270"] .square4background:before,
[degrees="270"] .square41, [degrees="270"] .square42,
[degrees="270"] .square43, [degrees="270"] .square44{
  transform: rotate(-270deg);
}
[degrees="0"] .square4background:before{transform: rotate(0deg);}

/*Position set on 0deg*/
.square41{
  top: 5px;
  left: 54px;
}
.square42{
  top: 52px;
  left: 99px;
}
.square43{
  top: 93px;
  left: 54px;
  background-color:black;
}
.square44{
  top: 52px;
  left: 8px;
}
/*Position set on 90deg*/
[degrees="90"] .square41{
  top: 2px;
  left: 56px;
}
[degrees="90"] .square42{
  top: 48px;
  left: 98px;
}
[degrees="90"] .square43{
  top: 92px;
  left: 56px;
}
[degrees="90"] .square44{
  top: 47px;
  left: 9px;
}
/*Position set on 180deg*/
[degrees="180"] .square41{
  top: 3px;
  left: 52px;
}
[degrees="180"] .square42{
  top: 45px;
  left: 97px;
}
[degrees="180"] .square43{
  top: 92px;
  left: 51px;
}
[degrees="180"] .square44{
  top: 45px;
  left: 6px;
}
/*Position set on 270deg*/
[degrees="270"] .square41{
  top: 4px;
  left: 49px;
}
[degrees="270"] .square42{
  top: 50px;
  left: 96px;
}
[degrees="270"] .square43{
  top: 95px;
  left: 49px;
}
[degrees="270"] .square44{
  top: 49px;
  left: 7px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" table="square4" degrees="0">
  <div class="removet"></div>
  <div class="background square4background" style="transform: rotate(0deg);">
    <div id="square41" class="chair connect_lists square4child square41 ui-sortable1">
    	<div id="8" class="person" title="hello hello">
      	<img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/woman.png" title="hello hello">
      	<span>Hello</span>
     </div>
    </div>
    <div id="square42" class="chair connect_lists square4child square42 ui-sortable1">
      <div id="6" class="person" title="test test">
        <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/woman.png" title="test test">
      	<span>Test</span>
      </div>
    </div>
    <div id="square43" class="chair connect_lists square4child square43  ui-sortable1"></div>
    <div id="square44" class="chair connect_lists square4child square44 ui-sortable1">
      <div id="2" class="person" title="Fiona Johnson">
        <img src="https://www.weddly.app/wp-content/themes/Stiles%20Media/assets/images/bride.png" title="Fiona Johnson">
        <span>Fiona</span>
      </div>
    </div>
  </div>
  <span class="fa fa-edit editdiv"></span>
  <span class="fa fa-rotate-left rotateleft"></span>
  <span class="fa fa-rotate-right rotateright"></span>
</div>
...