CSSで画像をゆがませて、...Web制作HTML-CSSCSSで画像をゆがませて、iTunesアートワークを作る2013-01-28TweetPocketCSSで画像をゆがませることができれば、一つの画像からいろんな見せ方ができると思ったのでやってみました。具体的にはCSSのTransformを使って画像を変形させます。これができるとどうなるでしょうか?例えばiTunesなどのヘッダーにあるアートワークの拡大縮小のようなことが、画像1枚だけで出来るようになります。大きいものと小さい画像を用意しても良いのですが、少し手間ですからね。それならCSSで画像をゆがませてサイズを変形させちゃえばいいやという感じです。完成図Transformsのプロパティではさっそく作っていきましょう。CSSのTransformsには複数のプロパティがあります。最初はCSSジェネレータを使ってサクッとつくれるかな〜と思ってたのですが、どれをいじっても求めている形になってくれません。Googleで検索してるとW3Cで詳しくサンプルまで掲載されていました。簡単にリスト化すると、以下のようなプロパティがあります。1.5)rotate:回転、rotate(45deg)skew:ゆがみ、skew(10deg)ここで、ゆがみだからskewだろうと思ってたのが大きな間違い。画像を縦を軸にして回転させる事で奥行きを表現することができるようです。rotateYを変更してみました。調べてみた所、この原因はperspectiveというプロパティにあるようです。このプロパティを指定することで平面に奥行きをみせることができるみたいです。やりかたがわかったので早速作ってみると以下のようにうまくいきました。これでCSSを使って1枚の画像からiTunesのアートワーク風イメージが出来上がりました。今回作製したコードこちらです。class="transformed3"></div></div></div></body></html>今回の記事では以下のページを参考にしました。SugimoriフリーランスのWebエンジニア。現在はテンプレート職人としてTetraThemesでテンプレートを開発中。ブログや個人に関するお問い合わせはTwitterかFacebookへ。2017-06-26Webに必須の高品質な写真素材を無料でダウンロードできるサイトを10本集めてみました。Web制作に限らずWebライティングでも必ず必要なのが写真素材。2017-06-21カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。2017-06-21カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。2017-06-19カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。2017-06-16カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。USTetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。