元画像
①translate
(20px,0px)
②translate
(0px,20px)
③translate
(-20px,0px)
④translate
(0px,-20px)
⑤translate
(20px,20px)
画像を <img src="arrow.png"> でＨＴＭＬ画面に表示するときに、ＣＳＳの transform 指定により変形して表示することができます。
移動(translate)
縮尺(scale)
回転(rotate)
傾斜(skew)
JavaScript 等の記述は一切不要です。
ここでは、他への影響を与えないように、インラインで
<img src="arrow.png" style="transform: translate(20px,0px);">
としていますが、
<style>
.表示Ａ { transform: translate(20px,0px) }
</style>
<img src="arrow.png" class="表示Ａ">
としても同じです。
（注意）変化した画像は、そのように見せているだけで、新しい画像になったのではありません。変化後の画像を「コピー」しても元の画像がコピーされます。
一般形：style="transform: translate(Ｘ方向,Ｙ方向);"
単位指定 20px, 30%
上下左右に空白が作られる
元画像 |
①translate (20px,0px) |
②translate (0px,20px) |
③translate (-20px,0px) |
④translate (0px,-20px) |
⑤translate (20px,20px) |
一般形：style="transform: skew(Ｘ方向,Ｙ方向);"
単位指定 20deg （ラジアンではなく度）
元画像 |
①skew (30deg,0deg) |
②skew (0deg,30deg) |
③skew (30deg,30deg) |
一般形：style="transform: scale(横倍率,縦倍率);"
①②は単純倍率指定 空白が作られる
倍率を -1 にすると反転になる ③～⑤
元画像 |
①scale (0.5,1) |
②scale (1,0.5) |
③scale (1,-1) |
④scale (-1,1) |
⑤scale (-1,-1) |
一般形：style="transform: rotate(時計回り角度);"
単位指定 20deg （ラジアンではなく度）
画像の中心を中心として回転する。
元画像 |
①rotate (10deg) |
②rotate (45deg) |
③rotate (-10deg) |
rotate の回転はX軸、Y軸、Z軸を分けて設定が可能
元画像 |
①rotateX (45deg) |
①rotateX (120deg) |
①rotateY (45deg) |
①rotateY (120deg) |
①rotateZ (45deg) |
①rotateZ (120deg) |
背景の画像（tokyo.jpg）と手前の画像（arrow.png）があるときの移動や回転を扱います。
重なる部分で背景を見えるようにするには、手前画像の空白部分の透明度を１００％にするのが適切です。
⓪ 元画像
<div style="position: relative;
width: 200px;
height: 150px;
">
<img src="tokyo.jpg">
<img src="arrow.png"
style="position: absolute;
right: 0px;
bottom: 0px;
">
</div>
|
① arrow の位置の移動
<div style="position: relative;
width: 200px;
height: 150px;
">
<img src="tokyo.jpg">
<img src="arrow.png"
style="position: absolute;
left: 20px;
top: 5px;
">
</div>
|
② arrow の向きを左右反転
<div style="position: relative;
width: 200px;
height: 150px;
">
<img src="tokyo.jpg">
<img src="arrow.png"
style="position: absolute;
right: 0px;
bottom: 0px;
transform: scale(-1,1);
">
</div>
|
③ 背景の回転
<div style="position: relative;
width: 200px;
height: 150px;
">
<img src="tokyo.jpg"
style="transform: rotate(30deg);
">
<img src="arrow.png"
style="position: absolute;
right: 0px;
bottom: 0px;
">
</div>
|
⓪ 元画像
<div style="position: relative; /* ア 画像を表示する領域。この中に２つの img を設定する */
width: 200px; /* イ ベース（背景）の画像サイズと一致 */
height: 150px;
">
<img src="tokyo.jpg"> /* ウ ベースになる画像を表示。div 全体に表示される */
<img src="arrow.png" /* エ 手前の画像。これを後に記述する必要 */
style="position: absolute; /* オ div（画像の領域）での絶対位置 */
right: 0px; /* カ 右端からの位置 */
bottom: 0px; /* キ 下端からの位置 */
">
</div>
① arrow の位置の移動
transform: translate を用いるよりも、⓪のカ・キを変更するのが簡単です。
② arrow の向きを左右反転
手前画像だけを変えるのですから、arrow.png の style で指定します。
rotate(180deg) とすると上下も反転します。
③ 背景の回転
②と同様、tokyo.jpg の style で指定します。
両方を回転するには、arrow.png にも transform: rotate(30deg); を加えます。
しかし、回転の中心が tokyo.jpg と異なるので、カ・キの調整が必要です。
画像にマウスを重ねると変形し、離れると元に戻ります。
このような操作は、JavaScript で記述するのが通常ですが、ここではＣＳＳだけで実現しています。
インラインで記述するのは複雑なので、<script> にしています。
画像表示場所には、次のように記述します。
<div class="回転１">
<img src="tokyo.jpg">
</div>
単に <img src="tokyo.jpg" class="回転１"> としたのではいけません。
クリックでの起動ですが、これはＣＳＳによるよりも JavaScript のほうがむしろ簡潔です。
① 単純な回転
<style>
.回転１{
width: 200px;
height: 150px;
}
.回転１ img:hover{
transform: rotate(180deg);
}
</style>
|
② 回転速度の指定
<style>
.回転２{
width: 200px;
height: 150px;
}
.回転２ img:hover{
transform: rotate(180deg);
transition-duration: 2s;
}
</style>
|
③ クリックによる回転
<script>
function クリック() {
var 変更個所 = document.getElementById("画像３");
変更個所.style.transform = "rotate(180deg)";
}
</script>
HTML
<img src="tokyo.jpg" id="画像３">
<button onClick="クリック()">回転</button>
|