bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームCSSCSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできたCSS2012.03.8CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる」でjQueryを使ったりCSSのtransitionを使ったりしてたんですが、これをtransformを使えばもっと簡単に作ることができます。最初からそれ使えよって話ですが・・・。以下サンプルやら使い方です。[ads_center]transformを使ってみるということでtransformにはscaleやrotateなど色々あるんですが、単純に要素を拡大/縮小したい場合はscaleを使います。以下scaleを使ったサンプルです。前回と同様にマウスオーバーすると要素が拡大します。scale(1.2);}記述も簡単になりましたね。ちなみにtransformは複数の関数を同時に指定できます。以下は上記のscaleと同時にrotateも追加してみたサンプルです。プロパティも多少変更していますが。rotate(15deg);}rotateは回転する角度を指定することができます。scaleと組み合わせると面白いですね。したアクセントになりそうな感じです。いうことで他にも色々と組み合わせると表現の幅が広がりますね。IEも考慮するとなるとやっぱりjQueryを使った方いいのかなと思ったりもしました。0よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみるjQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる関連記事CSSCSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。