移动父div并将孩子保持在同一位置

Question

我想通过x方向的过渡移动父div，但是子元素应该保持在它的位置。父div也会旋转并影响子div位置。我怎样才能让孩子停下来？

js fiddle

HTML

<div><span>Hello</span>

SCSS

div {
  width: 200px;
  height: 200px;
  transform: rotate(13deg) ;
  overflow: hidden;
  transition: all 1s;

  span {
   display: block;
   transform:  rotate(-13deg); 
   transition: all 1s;
  }

&.move {
   transform: translate(200px,0) rotate(13deg);

   span {
    transform: translate(-200px,0) rotate(-13deg) ; 
  }
 }
}

Answer 1

 &.move {
   transform: translate(200px) rotate(13deg) ;
   span {
   transform: translate(0) rotate(-13deg) ; 
   }
 }
}

Answer 2

更改translate元素的span位置有助于您实现所寻求的目标：

代码段

$('button').on('click', function() {
  $('div').toggleClass('move');
})

div {
  margin: 100px;
  background: red;
  width: 200px;
  padding: 60px;
  height: 200px;
  transform: rotate(13deg);
  overflow: hidden;
  transition: all 1s;
}
div span {
  display: block;
  font-size: 120px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  transform: rotate(-13deg);
  transition: all 1s;
}
div.move {
  transform: translate(200px) rotate(13deg);
}
div.move span {
  transform: translate(-190px, 44px) rotate(-13deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div>
  <span>hallo</span>
</div>