• css3

    変形(transform)

    2012/07/26

    transformをつかった変形処理について

    skewY.png

    transformプロパティで、変形処理を加えることができます。

    これを使ってアニメーションしたりするので、基本をしっかりおさえておく!はい!

    ※スマホで使える-webkit-対応のみ書きます。

     

    移動(translate)

    右へ(x)、下へ(y)指定した分移動します。

    書き方はこれ。

    
    -webkit-transform: translate(右への移動距離 , 下への移動距離);
    -webkit-transform: translateX(右への移動距離);
    -webkit-transform: translateY(下への移動距離);
    
    

    200pxのボックス(黒)の中で50pxのボックス(青)を動かしてみます。

     

    translate2.png

    
    -webkit-transform: translate(100px , 80px);
    
    

    こげな感じ!


     

    角度(rotate)

    角度を指定して回転させます。

    書き方はこれ。

    
    -webkit-transform: rotate(角度);
    -webkit-transform: rotateX(角度);
    -webkit-transform: rotateY(角度);
    -webkit-transform: rotateZ(角度);
    
    

    x,y,zというのは軸のことです。

    xyz.png

    この軸に対して回転する角度を書きます。単位はdegです。

    回転がわかりやすいようにボックスに文字を入れました。

     

    rotate.png

    
    -webkit-transform: rotate(45deg);
    
    

    rotate(角度で)2D回転をします。このように時計回りに45度回転しました。
    ※rotate(角度)とrotateX(角度)は同じ結果になります。


    rotateX.png

    
    -webkit-transform: rotateX(60deg);
    
    

    X軸方向に60度回転しました。


    rotateY.png

    
    -webkit-transform: rotateY(60deg);
    
    

    Y軸方向に60度回転しました。

     

    こげな感じ!


    拡大・縮小(scale)

    倍率を指定して、拡大・縮小します。

    書き方はこれ。

    
    -webkit-transform: scale(横に倍率 , 縦の倍率);
    -webkit-transform: scaleX(横の倍率);
    -webkit-transform: scaleY(縦の倍率);
    
    

    倍率は1=100%です。


    scale-2.png

    
    -webkit-transform: scale(2 , 0.9);
    
    

    横方向に2倍に拡大、縦方向に0.9倍に縮小しました。

     

    こげな感じ!


    斜傾(skew)

    角度を指定して、傾けます。

    書き方はこれ。

    
    -webkit-transform: skew(横の角度 , 縦の角度);
    -webkit-transform: skewX(角度);
    -webkit-transform: skewY(角度);
    
    

    回転(rotate)と同じく、単位はdegです、
    回転(rotate)と似ている気がしますが、こっちは歪みを与えるって感じですかね!


    skewX.png

    
    -webkit-transform: skewX(45deg);
    
    

    x軸に添って45度傾斜しました。


    skewY.png

    
    -webkit-transform: skewY(45deg);
    
    

    y軸に添って45度傾斜しました。


    こげな感じ!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back