タグ別アーカイブ: rotate

CSS：CSSで要素を回転させる方法「transform:rotate()」

Posted on by
2

CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素を
回転させて表示することができます。

transform: rotate(10deg);

rotate()には回転する角度を指定します。

下記のように「-」マイナスで指定することも可能です。
その場合は逆方向に回転して表示されます。

transform: rotate(-10deg);

要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。

下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。

■ 「transform:rotate()」の使用方法

【CSS】

<style type="text/css">
div#rotate {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
</style>

【HTML】

<div id="rotate">
test
</div>

【表示例】

css_transform_rotate_1

「transition」プロパティを使用すれば、hoverした時にアニメーションで回転させることも可能です。

■ hover時にアニメーションで回転させる場合

【CSS】

<style type="text/css">
div#rotate {
    color:#FFF;
    background-color:#09F;
    width: 200px;
    padding:20px;
    -moz-transition: -moz-transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    -ms-transition: -ms-transform 1s linear; 
    transition: transform 1s linear; 
}
div#rotate:hover {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

【HTML】

<div id="rotate">
test
</div>

【表示例】

サンプルページ

他にも「rotateX()」「rotateY()」「rotateZ()」「rotate3d()」で
指定することもできます。

要素を傾けて表示させたり、hoverした時に要素を回転させたりなど、
サイトに動きが出せて面白いかもしれないです。

Fuelphp：Imageクラスを使用し、画像を回転する「rotate」

Posted on by
返信

FuelphpのImageクラスを使用すると、簡単に画像を回転させることが可能です。

iPhoneで撮影した画像をアップロードし、ページに表示すると横に表示されてしまうことがあり、
アップロードした画像を回転させる必要がありました。

FuelphpのImageクラスを使用して、読み込んだ画像を回転させて保存する方法をメモします。

■ rotate()

ロードした画像を時計回りに回転します。
パラメータに回転する角度を指定します。

・時計回りに90度回転する場合

rotate(90)

※反時計回りの場合は「-90」

■ Imageクラスのrotate()で画像を回転

回転したいファイルをロードし、「rotate()」で回転する角度を指定します。

// ファイルパスを指定
$f_path = '/home/hoge/public/uploads/sample.jpg';

// ファイルを読み込む
\Image::load($f_path)
	->rotate(90)	// 時計回りに90度回転
	->save($f_path);	// 画像の保存

上記の方法で画像を回転して保存することが可能です。

他にもImageクラスを使用すればリサイズやトリミングなど簡単に画像を加工することできます。