<p>
  <button onclick="goTop()"> Go top </button>
  <button onclick="goRight()"> Go right </button>
  <button onclick="goBottom()"> Go bottom </button>
  <button onclick="goLeft()"> Go left </button>
  <br><br>
  <button onclick="rotateLeft()"> Rotate -25deg </button>
  <button onclick="rotateRight()"> Rotate 30deg </button>
</p>
<div id="square"> Lorem ipsum </div>
#square {
  width: 200px;
  height: 200px;
  background: tomato;
  margin: 30px auto;
  transition: transform ease-in-out 0.5s;
}

p {
  text-align: center;
}
var el = document.getElementById('square');

function goTop() {
  el.style.transform += 'translateY(-40px) ';
}

function goRight() {
  el.style.transform += 'translateX(40px) ';
}

function goBottom() {
  el.style.transform += 'translateY(40px) ';
}

function goLeft() {
  el.style.transform += 'translateX(-40px) ';
}

function rotateLeft() {
  el.style.transform += 'rotateZ(-25deg) ';
}

function rotateRight() {
  el.style.transform += 'rotateZ(30deg) ';
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.