<p>
  this div will change scale on hover
</p>
<div class='transform-example' id='scale'></div>
<p>
  this div will rotate on hover
</p>
<div class='transform-example' id='rotate'></div>
<p>
  this div will translate on hover
</p>
<div class='transform-example' id='translate'></div>
<p>
  this div will skew on hover
</p>
<div class='transform-example' id='skew'></div>
<p>
  this div will change scale, rotate, translate and skew on hover
</p>
<div class='transform-example' id='combo'></div>

%p
  this div will change scale on hover
#scale.transform-example
%p
  this div will rotate on hover
#rotate.transform-example
%p
  this div will translate on hover
#translate.transform-example
%p
  this div will skew on hover
#skew.transform-example
%p
  this div will change scale, rotate, translate and skew on hover
#combo.transform-example

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3";
.transform-example {
  width: 40px;
  height: 40px;
  background: red;
  margin: 20px; }
#scale {
  @include scale(1); }
#scale:hover {
  @include scale(2); }
#rotate {
  @include rotate(0deg); }
#rotate:hover {
  @include rotate(45deg); }
#translate {
  @include translate(0, 0); }
#translate:hover {
  @include translate(20px, 20px); }
#skew {
  @include skew(0deg, 0deg); }
#skew:hover {
  @include skew(20deg, 20deg); }
#combo {
  @include transform(1, 0deg, 0, 0, 0deg, 0deg); }
#combo:hover {
  @include transform(1, 45deg, 20px, 20px, 20deg, 20deg); }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3
.transform-example
  width: 40px
  height: 40px
  background: red
  margin: 20px
#scale
  +scale(1)
#scale:hover
  +scale(2)
#rotate
  +rotate(0deg)
#rotate:hover
  +rotate(45deg)
#translate
  +translate(0, 0)
#translate:hover
  +translate(20px, 20px)
#skew
  +skew(0deg, 0deg)
#skew:hover
  +skew(20deg, 20deg)
#combo
  +transform(1, 0deg, 0, 0, 0deg, 0deg)
#combo:hover
  +transform(1, 45deg, 20px, 20px, 20deg, 20deg)

@charset "UTF-8";
.transform-example {
  width: 40px;
  height: 40px;
  background: red;
  margin: 20px;
}
#scale {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#scale:hover {
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
#rotate {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
#rotate:hover {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#translate {
  -moz-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
#translate:hover {
  -moz-transform: translate(20px, 20px);
  -webkit-transform: translate(20px, 20px);
  -o-transform: translate(20px, 20px);
  transform: translate(20px, 20px);
}
#skew {
  -moz-transform: skew(0deg, 0deg);
  -webkit-transform: skew(0deg, 0deg);
  -o-transform: skew(0deg, 0deg);
  transform: skew(0deg, 0deg);
}
#skew:hover {
  -moz-transform: skew(20deg, 20deg);
  -webkit-transform: skew(20deg, 20deg);
  -o-transform: skew(20deg, 20deg);
  transform: skew(20deg, 20deg);
}
#combo {
  -moz-transform: scale(1) rotate(0deg) translate(0, 0) skew(0deg, 0deg);
  -webkit-transform: scale(1) rotate(0deg) translate(0, 0) skew(0deg, 0deg);
  -o-transform: scale(1) rotate(0deg) translate(0, 0) skew(0deg, 0deg);
  transform: scale(1) rotate(0deg) translate(0, 0) skew(0deg, 0deg);
}
#combo:hover {
  -moz-transform: scale(1) rotate(45deg) translate(20px, 20px) skew(20deg, 20deg);
  -webkit-transform: scale(1) rotate(45deg) translate(20px, 20px) skew(20deg, 20deg);
  -o-transform: scale(1) rotate(45deg) translate(20px, 20px) skew(20deg, 20deg);
  transform: scale(1) rotate(45deg) translate(20px, 20px) skew(20deg, 20deg);
}