CSS3 のtransform の上手な使い方。ActiveInbox

たまたま、自分のGmailのGTDを入れてみたいなと plugin を物色していたところ、ActiveInBox なるアプリケーションをみつけました。何気なくウェブサイトの説明をみていたところ所々でCSS3らしい挙動を発見しました。なんとも上手な使い方なので紹介したいと思います。

通常の状態ーChrome11

マウスをのせたところーChrome 11

マウスをホーバーさせると画像が拡大されしかも少しセンターに寄ってきます。ただ画像を拡大するUIは見ることはありますが、センターに寄ってくることによって非常に見やすいUIを実現しているのは非常に素晴らしい。

CSSソース

.shots li:first-child img:hover {

    -ms-transform : scale(1.6);

   -moz-transform : scale(1.6);

     -o-transform : scale(1.6);

-webkit-transform : scale(1.6);

        transform : scale(1.6);

    -ms-transform-origin : left bottom;

   -moz-transform-origin : left bottom;

     -o-transform-origin : left bottom;

-webkit-transform-origin : left bottom;

        transform-origin : left bottom;

-webkit-transform-origin-x : 0%;

-webkit-transform-origin-y : 100%; }

CSSのソースをみてみると transform-origin プロパティを 50% 50% から変更して　left bottom に設定しているんですね。translate を利用することなく、これだけで移動しているように見せるとは素晴しいテクニックです。

allWebクリエイター塾のCSS3講座で教える時も同じですが、CSS3はいかに「subtle」（巧妙）に使うかがポイントです。派手なデモではなく、いか上手に使うかを考えてみましょう。また、ブログでも素晴しいCSS3の使い方を見つけたら紹介したいと思います。