<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) ';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.