<button id="scale">Scale</button>

<button id="rotate">Rotate</button>

<button id="translate">Translate</button>

<br>

body {

  text-align: center;

  margin: 0px;

}

​

canvas {

  margin: 0px auto;

}

​

button {

  color: white;

  background: orange;

  border: none;

  padding: 10px;

  font-weight: 300;

  font-size: 1.2em;

  font-family: 'Lato';

  margin: 10px;

  cursor: pointer;

  outline: none;

}

const Engine = Matter.Engine,

  Render = Matter.Render,

  World = Matter.World,

  Bodies = Matter.Bodies,

  Body = Matter.Body;

​

const engine = Engine.create();

​

const render = Render.create({

  element: document.body,

  engine: engine,

  options: {

    width: 800,

    height: 300,

    wireframes: false

  }

});

​

engine.world.gravity.y = 0;

​

const topWall = Bodies.rectangle(400, 10, 800, 20, { isStatic: true });

const leftWall = Bodies.rectangle(10, 150, 20, 300, { isStatic: true });

const rightWall = Bodies.rectangle(790, 150, 20, 300, { isStatic: true });

const bottomWall = Bodies.rectangle(400, 290, 800, 20, { isStatic: true });

​

const box = Bodies.rectangle(460, 120, 40, 40);

​

World.add(engine.world, [topWall, leftWall, rightWall, bottomWall, box]);

​

Engine.run(engine);

​

Render.run(render);

​

document.querySelector('#scale').addEventListener('click', function () {

    Body.scale( box, 1.5, 1.2);

});

​

document.querySelector('#rotate').addEventListener('click', function () {

    Body.rotate( box, Math.PI/6);

});

​

document.querySelector('#translate').addEventListener('click', function () {

    Body.translate( box, {x: -10, y: 20});

});

​

​

​

​