<p>

<button>click me</button>

</p>

<div class="box-row">

​

<div class="box box1">center-rotate</div>

<div class="box box2">top-rotate</div>

<div class="box box3">right-rotate3d</div>

<div class="box box4">bottom-skew</div>

<div class="box box5">left-skewX</div>

<div class="box box6">left-top-skewY</div>

<div class="box box7">right-top-scale</div>

<div class="box box8">right-bottom-scaleX</div>

<div class="box box9">left-bottom-scaleY</div>

</div>

body {

  margin: 20px 0;

  padding: 0;

  font-size:10px;

​

}

.box-row{

    display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap; 

  justify-content: flex-start;

}

.box {

  background: lightblue;

  flex: 1;

  margin: 20px 20px;

  min-width: 30px;

  height: 100px;

}

​

.center {

  transform-origin: center;

  rotate:30deg;

}

.top {

  transform-origin: top;

  rotate:-30deg;

}

.right {

  transform-origin: right;

  transform: rotate3d(0.5, 1, .5, 45deg);

}

.bottom {

  transform-origin: bottom;

  transform: skew(20deg,10deg);

}

.left {

  transform-origin: left;

  transform: skewX(15deg);

}

.left-top {

  transform-origin: left top;

  transform: skewY(-15deg);

}

​

.right-top {

  transform-origin: right top;

  transform: scale(1.2,1.5);

}

​

.right-bottom {

  transform-origin: right bottom;

  transform: scaleX(0.8);

}

.left-bottom {

  transform-origin: left bottom;

  transform: scaleY(0.5);

}

​

​

button {

  display: block;

  margin: auto;

}

$('button').click(function () {

​

  $('.box1').toggleClass('center');

  $('.box2').toggleClass('top');

  $('.box3').toggleClass('right');

  $('.box4').toggleClass('bottom');

  $('.box5').toggleClass('left');

  $('.box6').toggleClass('left-top');

  $('.box7').toggleClass('right-top');

  $('.box8').toggleClass('right-bottom');

  $('.box9').toggleClass('left-bottom');

});