transform: translate3d demo

index.html

<div class="hoge"></div>

<button id="remove" type="button">back</button>
<button id="add" type="button">move</button>

script.js

$('#add').on('click', function(){
  $('.hoge').addClass('js-move');
});

$('#remove').on('click', function(){
  $('.hoge').removeClass('js-move');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.stylus

.hoge {
  width: 60px;
  height: 60px;
  background-color: #666;
  transform: translate3d(0, 0, 0);
  transition: transform 3s ease ;
  &.js-move {
    transform: translate3d(500px, 80px, 0);
  }
}

button {
  width: 80px;
  height: 40px;
  margin-top: 16px;
}

transform-translate3d-demo.markdown

transform: translate3d demo

A Pen by takanorioki on CodePen.

License.