div {
	width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
  position: absolute;
}
#translate {
  background-color: green;
	transform: translate(50px, 50px);
}
#rotate {
	background-color: blue;
  transform: rotate(45deg);
}
#scale {
	background-color: cyan;
  transform: scale(3);
  /*
  	scaleX() and scaleY() can be used to only target width or height
  */
}
#skew {
	background-color: yellow;
  transform: skew(20deg);
  /*
  	skew() without a second parameter defaults to 0 is the second parameter, only affects x-axis\
  	skewX() can be used to only target x-axis
  	skewY() can be used to only target y-axis
  */
}
#matrix {
  background-color: magenta;
  transform: matrix(2, 1, 1, 2, 150, 150);
  /*
  	matrix() combines the other 2D transform functions
  	6 required parameters - scaleX, skewY, skewX, scaleY, translateX, translateY
  */
}