CSS3のtransformを使ってみる

transformを使うことがちょくちょくあるので、使い方を少し調べてみました。

対応ブラウザ

transformが対応しているブラウザはこちら。
IE9からの対応になります。
また、Safari向けに-webkit-のベンダープレフィックスが必要なようです。

transform-origin

変形の軸をどこにするのかを指定します。
値が2つの場合はそれぞれX,Y座標を指定、1つの場合はX座標を指定でY座標はcenterになります。
指定は0～100%の値かleft, center, right, top, bottomで行い、指定がない場合は要素の中心になります。
　

transform: translate()

translateは要素を移動できます。
値が1つの場合はX座標、2つの場合はそれぞれX座標とY座標の移動位置になります。

X,Yいずれかの方向のみに移動させる場合、translateXやtranslateYでも指定できます。

HTML

<div class="box" id="base">基点</div>
<div class="box" id="translate1">transform: translate(150px);</div>
<div class="box" id="translate2">transform: translate(-80px, 120px);</div>
<div class="box" id="translate3">transform: translateX(400px);</div>
<div class="box" id="translate4">transform: translateY(300px);</div>

CSS

.box {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 120px;
	padding-top: 70px;
	text-align: center;
	opacity: 0.7;
}
#base {
	z-index: -1;
	background: #cccccc;
}
#translate1 {
	background: red;
	-webkit-transform: translate(150px);
	transform: translate(150px);
}
#translate2 {
	background: blue;
	-webkit-transform: translate(-80px, 120px);
	transform: translate(-80px, 120px);
}
#translate3 {
	background: green;
	-webkit-transform: translateX(400px);
	transform: translateX(400px);
}
#translate4 {
	background: orange;
	-webkit-transform: translateY(300px);
	transform: translateY(300px);
}

translateのデモページ
　

transform: scale()

scaleは要素を拡大・縮小できます。
基本的に軸は要素の中心になりますが、transform-originを指定することで軸を中心以外に設定できます。

HTML

<div class="box" id="base">基点</div>
<div class="box" id="scale1">transform: scale(1.5); transform-origin: 0 0;</div>
<div class="box" id="scale2">transform: scale(1.5); transform-origin: 100% 100%;</div>

CSS

.box {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 120px;
	padding-top: 70px;
	text-align: center;
	opacity: 0.7;
}
#base {
	z-index: -1;
	background: #cccccc;
}
#scale1 {
	background: red;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
#scale2 {
	background: blue;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

scaleのデモページ
　

transform: rotate()

rotateは要素を回転できます。
基本的に軸は要素の中心になりますが、transform-originを指定することで軸を中心以外に設定できます。

HTML

<div class="box" id="base">基点</div>
<div class="box" id="rotate1">transform: rotate(30deg);</div>
<div class="box" id="rotate2">transform: rotate(-60deg); transform-origin: 0 0;</div>
<div class="box" id="rotate3">transform: rotate(495deg); transform-origin: 100% 100%;</div>

CSS

.box {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 120px;
	padding-top: 70px;
	text-align: center;
	opacity: 0.7;
}
#base {
	z-index: -1;
	background: #cccccc;
}
#rotate1 {
	background: red;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}
#rotate2 {
	background: blue;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
#rotate3 {
	background: green;
	-webkit-transform: rotate(495deg);
	transform: rotate(495deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

rotateのデモページ
　

transform: skew()

skewは要素をゆがませることができます。
基本的に軸は要素の中心になりますが、transform-originを指定することで軸を中心以外に設定できます。

HTML

<div class="box" id="base">基点</div>
<div class="box" id="skew1">transform: skew(30deg, 10deg);</div>
<div class="box" id="skew2">transform: skew(45deg); transform-origin: 0 0;</div>
<div class="box" id="skew3">transform: skewX(-70deg); transform-origin: 100% 100%;</div>
<div class="box" id="skew4">transform: skewY(-60deg); transform-origin: 100% 0;</div>

CSS

.box {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 120px;
	padding-top: 70px;
	text-align: center;
	opacity: 0.7;
}
#base {
	z-index: -1;
	background: #cccccc;
}
#skew1 {
	background: red;
	-webkit-transform: skew(30deg, 10deg);
	transform: skew(30deg, 10deg);
}
#skew2 {
	background: blue;
	-webkit-transform: skew(45deg);
	transform: skew(45deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
#skew3 {
	background: green;
	-webkit-transform: skewX(-70deg);
	transform: skewX(-70deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
#skew4 {
	background: orange;
	-webkit-transform: skewY(-60deg);
	transform: skewY(-60deg);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

skewのデモページ
　

【参考サイト】

• CSS3 変形処理を行う transform プロパティ | CSS Lecture
• transform－CSS3リファレンス
• Can I use… Support tables for HTML5, CSS3, etc