<p>
  <button onclick="goAhead()"> Go ahead </button>
  <br><br>
  <button onclick="rotateLeft()"> Rotate 45deg anticlockwise </button>
  <button onclick="rotateRight()"> Rotate 45deg clockwise </button>
</p>
<img id="turtle" src="https://image.ibb.co/b13mST/turtle_41565_640.png">

p {
  text-align: center;
}

img {
  width: 130px;
  transition: transform ease-in-out 0.5s;
}

var el = document.getElementById('turtle');

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

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

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