画像の切り抜きを行うのに使ったサンプル。
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>