.a {
  width: 200px;
  height: 200px;
  background: #00C487;
  overflow: hidden;
  transition: 1s all;
}
.dot {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 181px;
  top: 50px;
  background: red;
}
button {
  position: absolute;
  right: 30px;
  bottom: 40px;
  width: 100px;
  height: 50px;
  color: blue;
}

.a {
  position: absolute;
}
.info {
  position: absolute;
  right: 30px;
  bottom: 100px;
}


body {
  margin: 0;
}

const e1 = 'translate(10px, 20px) rotate(37deg) scale(1.5, 2)'
const e2 = 'matrix(1, 0, 0, 1, 0, 0)'
const e3 = 'matrix(1.2, 0.9, -1.2, 1.6, 10, 20)'
const e4 = 'translate(0, 0) rotate(0deg) scale(1, 1)'

const arr = [e1, e2, e3, e4]

const button = document.querySelector('button')
const a = document.querySelector('.a')
const info = document.querySelector('.info')

let i = 0;

button.addEventListener('click',()=>{
  a.style.transform = arr[i % 4]
  
  info.innerHTML = arr[i % 4]
  
  i++
})