★Webページ作成支援~Simple Style★

1つの画像を回転させる(Rotate a single image)

1つの画像を回転させるスクリプトです。
2つのサンプルを作りました。

サンプル1

生成されたボックスの中心を基準に、画像が回転します。
画像自体は回転しません。

サンプル1の実行 画像の回転

サンプル1のソース

JavaScript
<script type="text/javascript">
//--------------------------------------------------------------
// Rotate one image. 1つの画像を回転させる
//--------------------------------------------------------------
// IMGS     : 回転する画像のオブジェクト作成(画像の幅、高さ)
// IMGS.src : 回転する画像のURL
// R     : 回転の半径(単位:px)
// CW    : キャンバスの幅(単位:px)
// CH    : キャンバスの高さ(単位:px)
// ANG   : ステップごとに移動する角度
// MSEC  : 回転する処理間隔(ミリ秒)
// LR    : 回転する方向(正数=右回り、負数=左回り)
// GW    : 回転する画像の幅(単位:px)
// GH    : 回転する画像の高さ(単位:px)
// CX    : 回転する中心のX座標(単位:px)
// CY    : 回転する中心のY座標(単位:px)
// stp   : ステップごとの移動量を格納する
//-------------------------------------------------------------------
const IMGS = new Image(57,57); // image object
IMGS.src = 'img/flower.gif'// location of the image
const R = 60;              // radius(pixel)
const CW = 400;            // width of the canvas(pixel)
const CH = 300;            // height of the canvas(pixel)
const ANG = 30;            // moving angle
const MSEC = 100;          // update interval(millimeters second)
const LR = 1;              // direction to rotate
                           // (regular=right,negative=left)
const GW = IMGS.width;     // width of the image(pixel)
const GH = IMGS.height;    // height of the image(pixel)
const CX = CW/2-(GW/2);    // center x coordinate(pixel)
const CY = CH/2-(GH/2);    // center y coordinate(pixel)
var stp = 0;               // movement every step
//-------------------------------------------------------------------

// Output of the element node.
  const ADD_IMG = document.createElement('img');
  ADD_IMG.src = IMGS.src;
  ADD_IMG.setAttribute('id','Lay');
  const OBJ = ADD_IMG.style;
  OBJ.position = 'absolute';
  OBJ.left = CX +'px'
  OBJ.top = CY +'px';
  OBJ.width = GW +'px'
  OBJ.height = GH +'px';
  OBJ.visibility = 'hidden';
  document.getElementById('canvas').appendChild(ADD_IMG);

// Main routine.
document.addEventListener('DOMContentLoaded',circle,false);
function circle(){
  stp = stp%360+(0.3*LR);
  OBJ.visibility = 'visible';
  OBJ.left = R*Math.cos(ANG*180*Math.PI+stp) + CX +'px';
  OBJ.top  = R*Math.sin(ANG*180*Math.PI+stp) + CY +'px';
  setTimeout( circle, MSEC );
}
</script>

三角関数を使う

◆三角関数を使い距離(半径)と角度から x と y 方向の移動量を求める。
JavaScriptでの記述例
Example
//ある座標位置(x1, y1)から角度 ang(θ)、距離r(半径) で移動した先(x2, y2)を求める
const ang = 30; //角度を指定
var x2 = x1 + Math.cos(ang*Math.PI/180) * r; //x軸方向移動量を求める
var y2 = y1 + Math.sin(ang*Math.PI/180) * r; //y軸方向移動量を求める

Math.cos()メソッドとMath.sin()メソッドを用いると sin と cos が求まります。
ただし、このメソッドの引数にはラジアンを指定する必要があります。
ラジアンとは半径1の円弧の長さを元にした単位。0~2πの間で角度を表す。


角度からラジアン、ラジアンから角度へ変換するには下の式を用いると実現できます
角度からラジアンに変換する
 ラジアン = 角度 * Math.PI / 180;

ラジアンから角度に変換する
 角度 = ラジアン * 180 / Math.PI;

サンプル2

CSS3から導入された「transformプロパティ」を使用して、画像自体を回転させます。

サンプル2の実行 画像が回転する

サンプル2のソース

JavaScript
<script type="text/javascript">
//--------------------------------------------------------------
// The image rotate. 画像を回転させる
//--------------------------------------------------------------
// IMGS     : 回転する画像のオブジェクト作成(画像の幅、高さ)
// IMGS.src : 回転する画像のURL
// CW    : キャンバスの幅(単位:px)
// CH    : キャンバスの高さ(単位:px)
// MSEC  : 回転する処理間隔(ミリ秒)
// LR    : 回転する方向(正数=右回り、負数=左回り)
// GW    : 回転する画像の幅(単位:px)
// GH    : 回転する画像の高さ(単位:px)
// CX    : 回転する中心のX座標(単位:px)
// CY    : 回転する中心のY座標(単位:px)
// ang   : ステップごとに移動する角度
//-------------------------------------------------------------------
const IMGS = new Image(57,57); // image object
IMGS.src = 'img/flower.gif'// location of the image
const CW = 400;            // width of the canvas(pixel)
const CH = 300;            // height of the canvas(pixel)
const MSEC = 100;          // update interval(millimeters second)
const LR = 1;              // direction to rotate
                           // (regular=right,negative=left)
const GW = IMGS.width;     // width of the image(pixel)
const GH = IMGS.height;    // height of the image(pixel)
const CX = CW/2-(GW/2);    // center x coordinate(pixel)
const CY = CH/2-(GH/2);    // center y coordinate(pixel)
var ang = 0;               // moving angle
//-------------------------------------------------------------------

// Output of the element node.
  const ADD_IMG = document.createElement('img');
  ADD_IMG.src = IMGS.src;
  ADD_IMG.setAttribute('id','Lay');
  const OBJ = ADD_IMG.style;
  OBJ.position = 'absolute';
  OBJ.left = CX +'px'
  OBJ.top = CY +'px';
  OBJ.width = GW +'px'
  OBJ.height = GH +'px';
  OBJ.visibility = 'hidden';
  document.getElementById('canvas').appendChild(ADD_IMG);

// Main routine.
document.addEventListener('DOMContentLoaded',circle,false);
function circle(){
  ang = (ang%360) + (10*LR); 
  OBJ.visibility = 'visible';
  OBJ.transform       = 'rotate(' + ang + 'deg)';
  OBJ.WebkitTransform = 'rotate(' + ang + 'deg)';//Safari
  setTimeout( circle, MSEC );
</script>

要素を回転させる方法

◆CSS3のtransformプロパティで、要素を自由な角度で回転させる方法

transformプロパティの値に「rotate」という値と角度を指定する。
「角度」には、単位「deg」を利用して数値で指定します。
例えば「90deg」で90度を示します。マイナス記号を使って負の値を指定することもできます。


transform: rotate( 角度 ); /* 2D回転 */
transform: rotateX( 角度 ); /* X軸回転 */
transform: rotateY( 角度 ); /* Y軸回転 */
transform: rotateZ( 角度 ); /* Z軸回転 */

ベンダープレフィックスVendor prefix

拡張機能であることを明示するための識別子
ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、それが拡張機能であることを明示するために付ける識別子のことです。

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 プロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

例えば上記のサンプル、transformプロパティで画像を回転させるには、FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があります。
Example
// 画像を90度回転させる
-moz-transform: rotate( 90deg );    // Firefox
-webkit-transform: rotate( 90deg ); // Chrome,Safari

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。
ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定します。
主要ブラウザのベンダープレフィックス
-moz-……Firefox
-webkit-……Google Chrome、Safari
-o-……Opera
-ms-……Internet Explorer


ベンダープレフィックス無しの指定も併記する
CSS3が勧告されるまでには、まだ時間が掛かることが予想されますが、今後審議を重ねる中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があります。
ベンダープレフィックスは草案段階の機能を実装する際に付けることが推奨されているので、これらの機能を利用する際には当面ベンダープレフィックスを付ける必要があるでしょう。

ただし、ベンダープレフィックスは、 草案(Working Draft)が勧告候補(Candidate Recommendation)になったときには外すことが推奨されています。
すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。
また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。

ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、今後の仕様策定の進展やブラウザのバージョンアップに備えて、ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。

Example
//ベンダープレフィックス無し(標準)も併記する
transform: rotate( 90deg );         // CSS3
-moz-transform: rotate( 90deg );    // Firefox
-webkit-transform: rotate( 90deg ); // Chrome,Safari
-o-transform: rotate( 90deg );      // Opera
-ms-transform: rotate( 90deg );     // IE


CSS3の開発状況
HTML5は2014年10月29日に正式勧告されましたが、CSS3に関しては『徐々に』勧告されています。

ラインを表示