Rotate Parent Div's 移动子 Div 的位置

【问题标题】：Rotate Parent Div's moves the children Div's positionRotate Parent Div's 移动子 Div 的位置
【发布时间】：2020-06-14 09:47:35
【问题描述】：

在使用旋转变换时遇到了困难，我有一张旋转的桌子，为了小提琴我已经涂黑了一个座位。

我将为每张桌子创建新的背景图片，我将有 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：

旋转前

旋转后

注意图像是如何随着父级旋转的。

我试图通过对孩子进行 -rotation 来抵消这种情况，我在这里处理了代码。

  $(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 保持在它旋转之前的确切位置但仍然旋转每次旋转时与父级一起移动。

【问题讨论】：

    标签： jquery html css rotation transform


    【解决方案1】：

    样式属性在 (degrees="0", degree="90", degree="180", degree="270") 的帮助下编写类似[degrees="90"] .square41 {...} 的css样式用于定位由::before Pseudo-Element 在“.square4background”上设置和背景图像。您可以在我的样式代码中看到。

    希望下面的sn-p对你有很大帮助。

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

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2012-01-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-12
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode