CSS

CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる」でjQueryを使ったりCSSのtransitionを使ったりしてたんですが、これをtransformを使えばもっと簡単に作ることができます。最初からそれ使えよって話ですが・・・。以下サンプルやら使い方です。

[ads_center]

transformを使ってみる

ということでtransformにはscaleやrotateなど色々あるんですが、単純に要素を拡大/縮小したい場合はscaleを使います。以下scaleを使ったサンプルです。前回と同様にマウスオーバーすると要素が拡大します。

サンプル

HTML

<div class="sample">
    <a href="#">sample</a>
</div>

CSS

.sample {
    width: 100px;
    height: 100px;
    margin: 30px;
}
.sample a {
    background: #06F;
    color: #fff;
    font-size: 13px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.sample a:hover {
    background: #0FF;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

記述も簡単になりましたね。ちなみにtransformは複数の関数を同時に指定できます。以下は上記のscaleと同時にrotateも追加してみたサンプルです。プロパティも多少変更していますが。

サンプル

CSS

.sample {
    width: 100px;
    height: 100px;
    margin: 30px;
}
.sample a {
    background: #06F;
    color: #fff;
    font-size: 13px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.sample a:hover {
    background: #0FF;
    color: #ccc;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-transform: scale(1.3) rotate(15deg);
    -moz-transform: scale(1.3) rotate(15deg);
    -o-transform: scale(1.3) rotate(15deg);
    transform: scale(1.3) rotate(15deg);
}

rotateは回転する角度を指定することができます。scaleと組み合わせると面白いですね。ちょっとしたアクセントになりそうな感じです。ということで他にも色々と組み合わせると表現の幅が広がりますね。ただ、IEも考慮するとなるとやっぱりjQueryを使った方いいのかなと思ったりもしました。

よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる前のページ

jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  2. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  3. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  4. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  5. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  6. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP