Transformの基本をおさらいしよう~translate、scale編~Web制作HTML・CSSコーディングシェアTweetこんにちは。先日「鉱石キャンドル」なるものを作りました。色付けなどを工夫して作ったキャンドルを鉱石っぽくなるように砕くとできるのですが、キャンドルをカッターでガリガリ砕いて変形させていく工程がなかなか楽しかったです。Transformについて紹介させて頂きます。Transitionと組み合わせることで簡単にCSSのアニメーションを実現することができます。Transitionについてはこちらをご覧ください。Transitionの基本をおさらいしようこんにちは。先日避暑もかねて水族館に行ってきました。今回訪れた水族館では海月の水槽がライトアップされていてブルーのライトがぼんやりと明滅するのですが、それを見ていたらマウスオーバーで点滅するボタンのことを思い出しました。長くなってしまったため記事を二回に分けて紹介させていただきます。TransformとはCSS3で新たに追加されたプロパティで、設定された要素を変形させることができます。今回は移動、拡大縮小ができる二つの関数を紹介していきます。注意:ベンダープレフィックスが必要ですその前に大事なお話です。Transformを記述する際にはIE9、androidなどのブラウザに対応させるためにベンダープレフィックスの記述が必要です。下記の様に記述しましょう。;移動(translate)さて最初に紹介する関数は指定した要素を基準の位置から移動させるTransformプロパティの関数になります。translateZ(50px);注意:Z軸を利用した奥行きの移動についてZ軸を使用する場合は親要素にperspectiveプロパティを設定するか、同じtransformプロパティでperspectiveを指定することで要素に奥への傾きをつけてください。ないと要素が奥に移動しても遠近感が出ません。translateZ(300px);と指定することで要素を奥に移動することができます。ショートハンドラ複数記述する場合は記述を省略することが出来ます。50px);簡単に見てみましょう。以下はマウスオーバーで要素が移動するようになっています。要素を移動させる他のCSSとの比較positionを使っても同じような動きはできます。0;}コピーpositionで移動すると少しカクつきますね!IE8以下の対応などが必要な場合以外はtranslateで動かした方が無難そうです。拡大縮小(scale)指定した要素を拡大縮小するTransformプロパティの関数になります。下記のコードで(1.5)となっているところは1.5倍にするということになります。マイナス値にすることで縮小することもできます。scaleY(1.5);ショートハンドラ複数記述する場合は記述を省略することが出来ます。X、Y軸の拡大縮小transform:scale(1.5,1.5);では実際見てみましょう。scale(1.5,1.5);}コピーこのようにCSSを記述するだけでお手軽に要素を拡大縮小させることができます。まとめtranslate、scaleを利用することでCSSだけで簡単にアニメーションを実現することができます。Transformを駆使してあなたのWebサイトをリッチにしましょう。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。