CSS3の変形(transform)を勉強してみた。

クリエイティブ

毎日1万歩歩いているおかげで代謝が良くなったのでしょうか?今年の秋は例年より薄着で過ごせています。

前回、アニメーションの勉強したので、今回は変形の勉強をしてみようと思います。
アニメーションと変形を組み合わせれば、幅が広がりますよね。
早速見ていきましょう。
今回この画像を変形させてみます。
NA icon

変形はこのような座業を基準にしています。画面に向かって左右の方向がX、上下方向がY、分かりにくいですけど、奥行き方向がZになります。
matrix

tranformプロパティの値(移動、拡大・縮小、回転、傾斜)の数値を変えることによって位置や形を変えることができます。

セレクタ{
transform: 値(数値);
}

移動: translate

元の場所から位置を変えます。
transform: translateX(数値); 水平方向(X)の移動です。
transform: translateY(数値); 垂直方向(Y)の移動です。
transform: translateZ(数値); 奥行き方向(Z)の移動です。ただあるものにかけても何の変化も感じられませんが、他のプロパティとの合わせ技で色々できるみたいです。
transform: translate(数値,数値); 水平、垂直を一遍に設定します。1番目の数値が水平方向(X)。2番目が垂直方向(Y)です。
Z方向を入れると3dがつきます。
transform: translate3d(数値,数値,数値);

拡大・縮小: scale

これもX、Y、Z方向それぞれあります。
数値は1が100%です。半分にしたかったら「0.5」、2倍にしたかったら「2」っていう感じです。
transform: scaleX(数値);
transform: scaleY(数値);
transform: scaleZ(数値);

同じようにXYをまとめた書き方と3次元な書き方。
transform: scale(数値,数値);

transform: scale3d(数値,数値,数値);

回転: rotate

何もない場合時計回りに回転します。単位は「deg」です。
XYZをつけるとそれぞれの軸を基準に回転します。
transform: rotate(数値deg);

transform: rotateX(数値deg);
transform: rotateY(数値deg);
transform: rotateZ(数値deg);

rotate3d(数値,数値,数値,数値deg);

傾斜: skew

アドビイラストレーターを使っている人はシアーっていう方がなじみがあるかもしれません。
四角形が平行四辺形になるような変形です。

transform: skewX(数値deg);
transform: skewY(数値deg);
transform: skewZ(数値deg);

同じようにXYをまとめた書き方
transform: skew(数値deg,数値deg);

そして3次元な書き方。
transform: scale3d(数値deg,数値deg,数値deg));

ページ内でCSS3使おうしたらできなかったので
サンプルページをご用意しました。
Z方向はわかりにくいので適用したものとしていないものを並べてあるので違いを感じてください。

以上は以下のサイトで勉強させていただきました。
参考サイト:
transform-CSS3リファレンス

と、ここまで勉強してきましたが、、、。
なな、なんと!こんな便利なものがありました。
transformのcssを自動生成してくれるサイトです。

CSS Transform | CSS 3.0 Transform Maker | CSS 3.0 Transform

スライダーを動かして形を調整して好みの形ができたらDOWNLOADボタンでCSSをダウンロードできます。
これがあればラクラクですね。

コメント

  1. ブランドコピーN品通販専門店

    最新作ブランドコピールイヴィトン財布激安
    偽物ブランド財布,偽物ブランド財布
    シャネル財布偽物,ルイヴィトン財布,財布コピー
    人気ブランド_バッグコピー_財布コピー
    サングラス偽物_ベルトコピー_新作_ブランドコピー

    バッグ、財布、小物などでございます専売店
    ★弊社は「信用第一」をモットーにお客様にご満足頂けるよう
    ★全物品運賃無料(日本全国)
    ★不良品物情況、無償で交換します.
    ★税関没収する商品は再度無料で発送します!

    ホームページ上でのご注文は24時間受け付けております

  2. ルイヴィトン トートバッグ 偽物のカタログです。
    ルイヴィトントートバッグコピーは軽量で丈夫~ルイヴトンの数あるバッグの中で圧倒的な支持を誇る物だ!
    必要な荷物が余裕を持って収納できます。
    A4サイズの書類なども収納できる軽量で肩かけが可能なアイテムです!
    収納力抜群なので通勤、通学、ママバッグなど幅広くお使いいただけます。
    どうぞごゆっくり選んでください。