今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

CSS3 transformを学ぶ。

css3の3つの機能のうちの一つ、transformをまとめます!

その他、

taransition, animation もあります。

変形や、アニメーションに使用するプロパティ達です。

注:Chromeで試します。

 

ではtransformいきます

 

1、transform:scale();

その名前の通り、大きさを変更します。

transform:scale(1.5);  // 1.5倍に

のように使います。 XやYのみ、Zや3Dなどもあるそうです。

f:id:sudara_bluse:20180608062215p:plain

transform:transform:scale(1.5);  // 1.5倍に

f:id:sudara_bluse:20180608062215p:plain

 

 

2、transform:translate();

こちらは要素を移動します

あとでアニメーションと組み合わせるといい感じになります。

jsでaddClassして発火、translateで移動なんかするらしいです。

こちらもXやYのみ、Zや3Dなどもあるそうです。(Zと3D試さなきゃ。。)

 

transform:translate(30px,30px);  // x方向に30px y方向に30px移動

f:id:sudara_bluse:20180608062215p:plain

f:id:sudara_bluse:20180608062215p:plain

 

 

3、transform:rotate();

こちらは要素の角度を変えて回転させます。

今回はY軸でやってみましょ。これまたX,Y,Z,3Dがあるそうです。

transform:rotateY(110deg); y軸を110度回転。

f:id:sudara_bluse:20180608062215p:plain

f:id:sudara_bluse:20180608062215p:plain

 

3、transform:skew();

要素を歪ませます。

個人的にはあまり使わない印象です。

transform:skew(15deg,30deg);

f:id:sudara_bluse:20180608062215p:plain

 

以上、アニメーションつけた詳細が乗っててこちらが動きの確認しやすいです。

【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】

 

たまには朝勉もいいですね。Zと3Dを確認せねば。

ではまたー