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. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  2. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

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

    CSS

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

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

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

    CSS

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

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

  5. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  6. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

コメント

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP