CSS3のtransformで要素を斜めにしたり平行四辺形に画像をトリミング

斜めにした要素を横並びで配置する機会があったので、CSS3のtransform:rotateで斜めにしたり、平行四辺形に画像をトリミングした備忘録です。

まずは、要素を斜めにしてみます。
斜めにするには
transform:skew(X軸,Y軸);
を使います。
単位は”deg”です。

■html

	
<div id="slanting01"><a href="#"></a></div>
	

■CSS

	
#slanting01{
 width:30%;
 height:100px;
 background:#FF7373;
 margin:0 auto;
 text-align:center;
 transform:skew(15deg,15deg);
}
	

DEMO

この場合、上下左右が15°の斜めになります。
X軸もY軸も斜めにすると思ってた以上に要素に高さが出ました。

ここからは平行四辺形です。
今回は上下（Y軸）は横にまっすぐにしたいので左右（X軸）だけを斜めにします。
X軸のみ
transform:skewX(15deg);
Y軸のみ
transform:skewY(15deg);

DEMO

できました。
次は横に並べてみます。

■html

	
<ul id="slanting03">
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
</ul>
	

■CSS

	
ul#slanting03 li{
 width:150px;
 height:150px;
 margin:0 2%;
 display:inline-block;
 background:#FDAB75;
 transform:skewX(30deg);
}
	

DEMO

次、画像を追加してみましょう

■html

	
<ul id="slanting04">
 <li><a href="#"><img src="img/photo01.jpg"></a></li>
 <li><a href="#"><img src="img/photo01.jpg"></a></li>
 <li><a href="#"><img src="img/photo01.jpg"></a></li>
</ul>
	

■CSS

	
ul#slanting04 li{
 width:150px;
 height:150px;
 margin:0 2%;
 display:inline-block;
 background:#FDAB75;
 transform:skewX(30deg);
}
ul#slanting04 li img{width:100%;}
	

画像まで平行四辺形に沿って歪みました…。

<li>内をskewX(30deg)で斜めにしているので<img>だけ逆にtransformします。
ついでに<li>にoverflow:hidden;ではみ出た部分は隠します。

■CSS

	
ul#slanting04 li{
 width:150px;
 height:150px;
 margin:0 2%;
 display:inline-block;
 background:#FDAB75;
 transform:skewX(30deg);
 overflow:hidden;
}
ul#slanting04 li img{
 width:100%;
 transform:skewX(-30deg);
}
	

画像の幅が足りません。
更にscaleで拡大します。
※あらかじめ大きめの画像を使用することをオススメします

■CSS

	
ul#slanting04 li img{
 width:100%;
 transform:skewX(-30deg) scale(1.6);
}
	

DEMO

これでCSSだけで画像も平行四辺形になりました。
ちなみに、この子は今年の社員旅行で出会った宮島のシカちゃんです。かわいいは正義ですね。

Tweet