CSSで画像をゆがませて、iTunesアートワークを作る

Pocket

cssTransform

CSSで画像をゆがませることができれば、一つの画像からいろんな見せ方ができると思ったのでやってみました。具体的にはCSSのTransformを使って画像を変形させます。

これができるとどうなるでしょうか?例えばiTunesなどのヘッダーにあるアートワークの拡大縮小のようなことが、画像1枚だけで出来るようになります。大きいものと小さい画像を用意しても良いのですが、少し手間ですからね。それならCSSで画像をゆがませてサイズを変形させちゃえばいいやという感じです。

完成図

csstransform1

Transformsのプロパティ

ではさっそく作っていきましょう。
CSSのTransformsには複数のプロパティがあります。最初はCSSジェネレータを使ってサクッとつくれるかな〜と思ってたのですが、どれをいじっても求めている形になってくれません。

で、Googleで検索してるとW3Cで詳しくサンプルまで掲載されていました。簡単にリスト化すると、以下のようなプロパティがあります。

  • translate:移動、translate(80px, 80px)
  • scale:スケール、scale(1.5, 1.5)
  • rotate:回転、rotate(45deg)
  • skew:ゆがみ、skew(10deg)



ここで、ゆがみだからskewだろうと思ってたのが大きな間違い。画像を縦を軸にして回転させる事で奥行きを表現することができるようです。rotateYを変更してみました。
csstransform2
なんか思ってるのと違う・・・

調べてみた所、この原因はperspectiveというプロパティにあるようです。このプロパティを指定することで平面に奥行きをみせることができるみたいです。やりかたがわかったので早速作ってみると以下のようにうまくいきました。
csstransform1
これでCSSを使って1枚の画像から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>



今回の記事では以下のページを参考にしました。