旋转 Parent Div 移动 children Div 的位置

Question

旋转变换有困难，我有一个旋转的 table，为了 Fiddle 我已经涂掉了一个座位。

我将为每个 table 创建新的背景图像，我将有 4 个 table，一个是 table of 4，table of 3， table 的 2 和 table 的 1.

它将是一个带有背景图片的 div，但用户可以旋转 table 直到他们按照自己的方式获得它。

更好的解释将在fiddle。

  $(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/

当你点击右边的旋转时，parent会旋转并带走children，这正是我想要的，但是由于旋转，人物的形象会变形，你可以在 fiddle.

中看到它

旋转 90 度：

旋转前

旋转后

注意图片是如何随 parent 旋转的。

我试图通过 children 上的 -rotation 来抵消这种情况，我有 fiddle 和这里的代码。

  $(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保持在原来的位置它已旋转，但仍随 parent 旋转，并且每次旋转时都不会轻微移动。

Answer 1

在 (degrees="0", degrees="90", degrees="180", degrees="270") 的帮助下设计属性到为 ::before 伪元素在 '.square4background' 上设置的定位集和背景图像编写 css 样式，如 [degrees="90"] .square41 {...}。你可以在我的样式代码中看到

希望下面的代码片段对您有所帮助。

$(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>

旋转 Parent Div 移动 children Div 的位置

Rotate Parent Div's moves the children Div's position

html

css

jquery

transform

rotation