Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 transform 要素を変形させる part2

今回は、CSS3の「transform」について書きます。


以前に、transformの「拡大・縮小(transform:scale)」と「移動(transform:translate)」を書きました。
今回は、「回転」,「傾斜」,「遠近効果」について書きます。

「回転」などを書く前に、「transform」を軽く説明します。
「transform」は、要素を拡大,回転,移動など色々変形させる事ができます。


はじめに「回転」から書いていきます。
「回転」は、名前の通り要素を回転させることができます。
やり方は、

-webkit-transform:rotate(25deg); 

こんな感じです。(※「webkit」などのベンダープレフィックスは適宜つけてください。)
「-35deg」といったマイナスも指定できます。

実際のプログラムでやるとこんなかんじです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 400px;
	 	height: 200px;
	 	background-color: red;
                -webkit-transform:rotate(25deg); 	
       }
	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>

実行結果
f:id:gupuru:20140319230400p:plain
※赤色は、「width: 400px;height: 200px;」の普通のやつです。青色が回転させたものです。比較のために上のプログラムとは、少し違います。

さらに、

/*1.X軸を軸として回転します*/
-webkit-transform:rotateX(-25deg); 

/*2.Y軸を軸として回転します*/
-webkit-transform:rotateY(150deg); 

/*3.Z軸を軸として回転します*/
-webkit-transform:rotateZ(-125deg); 

こういう細かい指定もできます。



次に「傾斜( skew() )」について書いていきます。
「傾斜( skew() )」は要素を傾けることができます。
f:id:gupuru:20140319231158p:plain

やり方は・・・

-webkit-transform:skew(45deg,20deg); 
/*skew(X軸の傾斜角度, Y軸の傾斜角度); */

(※「webkit」などのベンダープレフィックスは適宜つけてください。)

第1引数はX軸の傾斜角度,、第2引数はY軸の傾斜角度となっています。
マイナスの値も大丈夫です。

さらに、

/*1.skewX(X軸の傾斜角度)*/
-webkit-transform:skewX(20deg); 

/*2.skewY(Y軸の傾斜角度)*/
-webkit-transform:skewY(20deg); 

こういう細かい指定もできます。

実際のプログラムで使うと、こうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 #maru {
	 	width: 30px;
	 	height: 30px;
	 	background-color: red;
	       -webkit-transform:skew(20deg,45deg); 

	 }

	#nya{
		width: 30px;
	 	height: 30px;
	 	background-color: blue;
	 	-webkit-transform:skewX(20deg); 
	}
	</style>
</head>
<body>
	<div id="maru"></div>
	<div id="nya"></div>
</body>
</html>

f:id:gupuru:20140319231747p:plain



最後に、「遠近効果」について書きます。
遠近効果は、奥行きの深さを指定し、遠近効果を調整するものです。
こちらは、少しわかりにくいかも・・・

やり方は・・・

-webkit-transform: perspective(300) 
/*perspective(数値); */

(※「webkit」などのベンダープレフィックスは適宜つけてください。)

実際のプログラムで使うとこんなかんじです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 #maru {
	 	 position: absolute;
 		left:100px;
	 	width: 200px;
	 	height: 200px;
 		background-color: rgba(255,0,0,0.5);
	 }

	#nya{
		 position: absolute;
		 left:100px;
		width: 200px;
	 	height: 200px;
 		background-color: rgba(0,255,0,0.5);
 		-webkit-transform: perspective(300) rotateX(30deg);
	}


	</style>
</head>
<body>
	<div style="position: relative; height: 230px;">
		<div id="maru"></div>
		<div id="nya"></div>
	</div>
</body>
</html>

f:id:gupuru:20140319233000p:plain
緑にperspectiveを使っています。 赤は普通のものです。
遠近効果が出ているかな??


これで、transform の機能のすべてです。今のところ。


参考サイト
transform-CSS3リファレンス
CSS3の3D transform、三次元回転やperspectiveの実装状況は? - freefielder.jp