CSSで画像を上下左右に反転する方法 #CSS

画像の切り抜きを行うのに使ったサンプル。
IE8でも動作した。結構昔からFlipってあるのね。知らなかった。
IEだとDXImageTransform.Microsoft.BasicImage()があるけど、これと同じことらしい。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>画像の上下左右反転サンプル</title>
<style>
.refrect-lr{
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.refrect-ud{
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}
.refrect-udlr{
  -webkit-transform: scale(-1,-1);
  -o-transform: scale(-1,-1);
  -moz-transform: scale(-1,-1);
  transform: scale(-1,-1);
  filter: FlipH FlipV;
  -ms-filter: "FlipH" "FlipV";
}
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
$(function(){
  // 上下反転
  $('#refrect-ud-check').on({
    'click': function(event) {
      if($(this).prop('checked')) {
        $('#sample').addClass('refrect-ud');
      } else {
        $('#sample').removeClass('refrect-ud');
      }
    }
  });

  // 左右反転
  $('#refrect-lr-check').on({
    'click': function(event) {
      if($(this).prop('checked')) {
        $('#sample').addClass('refrect-lr');
      } else {
        $('#sample').removeClass('refrect-lr');
      }
    }
  });

  // 上下左右反転
  $('#refrect-udlr-check').on({
    'click': function(event) {
      if($(this).prop('checked')) {
        $('#sample').addClass('refrect-udlr');
      } else {
        $('#sample').removeClass('refrect-udlr');
      }
    }
  });
});
</script>
</head>
<body>
<p><img src='sample1.jpg' id='sample'></p>
<p><input type='checkbox' id='refrect-ud-check'>上下反転</p>
<p><input type='checkbox' id='refrect-lr-check'>左右反転</p>
<p><input type='checkbox' id='refrect-udlr-check'>上下左右反転</p>
</body>
</html>