CSSで画像をゆがませることができれば、一つの画像からいろんな見せ方ができると思ったのでやってみました。具体的にはCSSのTransformを使って画像を変形させます。
これができるとどうなるでしょうか？例えばiTunesなどのヘッダーにあるアートワークの拡大縮小のようなことが、画像１枚だけで出来るようになります。大きいものと小さい画像を用意しても良いのですが、少し手間ですからね。それならCSSで画像をゆがませてサイズを変形させちゃえばいいやという感じです。
完成図
Transformsのプロパティ
ではさっそく作っていきましょう。
CSSのTransformsには複数のプロパティがあります。最初はCSSジェネレータを使ってサクッとつくれるかな〜と思ってたのですが、どれをいじっても求めている形になってくれません。
で、Googleで検索してるとW3Cで詳しくサンプルまで掲載されていました。簡単にリスト化すると、以下のようなプロパティがあります。
- translate:移動、translate(80px, 80px)
- scale:スケール、scale(1.5, 1.5)
- rotate:回転、rotate(45deg)
- skew:ゆがみ、skew(10deg)
ここで、ゆがみだからskewだろうと思ってたのが大きな間違い。画像を縦を軸にして回転させる事で奥行きを表現することができるようです。rotateYを変更してみました。
なんか思ってるのと違う・・・
調べてみた所、この原因はperspectiveというプロパティにあるようです。このプロパティを指定することで平面に奥行きをみせることができるみたいです。やりかたがわかったので早速作ってみると以下のようにうまくいきました。
これでCSSを使って１枚の画像からiTunesのアートワーク風イメージが出来上がりました。
今回作製したコードこちらです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS-Transform</title>
</head>
<body>
<style>
body{margin:40px;}
.container{
float:left
}
.container,.transformed1,
.transformed2,.transformed3 {
height: 150px;
width: 150px;
}
.container {
perspective: 500;
-webkit-perspective: 500;
-moz-perspective: 500;
}
.transformed1 {
background-color:#09c;
transform: rotateY(50deg) ;
-webkit-transform: rotateY(50deg) ;
-moz-transform: rotateY(50deg) ;
-o-transform: rotateY(50deg) ;
-ms-transform: rotateY(50deg) ;
}
.transformed2 {
background-color:#f9c;
}
.transformed3 {
background-color:#3fc;
transform: rotateY(-50deg) ;
-webkit-transform: rotateY(-50deg) ;
-moz-transform: rotateY(-50deg) ;
-o-transform: rotateY(-50deg) ;
-ms-transform: rotateY(-50deg) ;
}
</style>
<div id="wrapper">
<div class="container">
<div class="transformed1"></div>
</div>
<div class="container">
<div class="transformed2"></div>
</div>
<div class="container">
<div class="transformed3"></div>
</div>
</div>
</body>
</html>
今回の記事では以下のページを参考にしました。
