CSS3のtransformを使ってみた

以前、ラスベガス旅行に行く機会があり、その時の事を「ラスベガスに行ったのに、カジノには行かなかったのなら...」というブログにまとめています。 そして、このブログのトップページはトランプが４枚並んでいて、マウスオーバーでトランプの画像を切り替えて、トランプの裏？表？...数字の方が見えるようにしてます。ありがちなデザインパターンですね...。 見た通り、このトップページのトランプはそれぞれが傾いています。通常、このようなデザインにする場合、Photoshopなどの画像編集ソフトで傾いたトランプを配置して、スライスするなどしてページを作成するのが一般的だと思います。 各トランプを含んだ範囲で切り取り、CSSでz-indexやmarginを使って重なり具合や重なり順を調整するという様になると思います。場合によっては、透過PNGを使う必要もあるかも...。下の画像のイエローとオレンジの枠がスライ