2016年4月6日(水)
オブジェクトの回転 #HTML5&CSS3&JavaScript Exifデータとは、画像ファイルに付加されている情報データ（メタデータ）である。撮影した日時、使用したカメラ、回転などが記載されている。
JavaScriptでExifデータを読み出すプログラムは、結構難しい。PHPで読み出したExifデータを、引き渡すやり方が妥当である。
スタイルシートCSS3は強力であり、transform:rotate(90deg);で、オブジェクトを時計回りに90°回転してくれる。非常に簡便である。
--
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>CSS3 transform:rotate(90deg)</title>
</head>
<body>
<p>【オリジナル】<br>
<img src="image.jpg" style="width:240px;"></p>
<p>【90°回転】<br>
<img src="image.jpg" style="width:240px; transform:rotate(90deg);"></p>
</body>
</html>
--
しかし、Microsoft EdgeおよびIE11では、レイアウトが崩れている。横長を縦長にすると、画面で横長の分が空いて、上下に伸びて、他のオブジェクトと重なり、調整が難しい。加えて、HTMLファイルであり、画像ファイルではないので、画像の拡大縮小のハンドリングが悪い。残念、用途に合わない。
さらに、ブラウザごとに、挙動が異なるので、この方法は『子猫の手』では却下。オブジェクトの回転に関しては、PHPで作成することにする。
http://neconote.jp/php/rotate_css3.html
お問い合わせ