皆さんおはようございます！！
今日もぱりっといきましょう！！
ちなみに、最近暑いのでひやがっています。笑
今回はCSS3の醍醐味、変形とアニメーションです。
それではいきますね。
トランスフォーム関連プロパティ
回転・拡大縮小・移動・傾斜 CSS3新
transformプロパティを使用するとそれだけで、回転・拡大縮小・移動・傾斜の全てを
しかも必要であれば同時に行うことができるようになります。
ただし、このプロパティだけでは変化の過程をアニメーションのように表示させることはできません、
このプロパティで表示できるのは最終的な表示結果だけです。
値はそれぞれの機能に合わせた関数形式になっており、
半角スペースで区切って必要なだけ指定することができます。
値は指定された順番に実行されますので、指定する順番に実行されますので、指定する順序によって
表示結果も変わる場合もあるので注意して下さい
尚、このプロパティでボックスの大きさは位置などを配置位置には影響は一切ありません。
指定できるのは次の値です。
3Dの値も用意されていますが、2Dの値を中心に抜粋して紹介していきます。
transform
- rotate(角度)
時計周りに回転させる角度を単位付きの実数で指定します
- scale(実数,実数)
拡大縮小させる倍率を横方向・縦方向の順に単位をつけない実数でカンマ区切って指定します
値をひとつだけ指定するとその値が横方向・縦方向に適応されます！！
- scaleX(実数)
横方向に拡大縮小を倍率を単位つけない実数で指定します
- scaleY(実数)
縦方向に拡大縮小を倍率を単位つけない実数で指定します
translate(単位付きの実数・単位付きの実数)
移動させる距離を右方向・下方向の順に単位つきの実数を指定します。負の値は逆になります。
ひとつだけだと、右方向へ指定することとなります。
- translateX もしくはY
右方向に移動する距離を単位付きの実数Xだと右
Yだと下というふうになります。負の値だと、逆方向に移動します
- skew(角度) skewX skewY
傾斜させる角度をx軸に沿った傾斜の角度・y軸に沿った傾斜の角度の順に沿って実数でカンマで区切って指定します 値を一つだけ指定するとx軸に沿った傾斜の角度だけを指定したことになります
- none
回転・拡大縮小・移動・傾斜を一切していない状態となります
そしたらデモりますね！！
<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/228909_10.jpg” alt=”盆栽” style=”-webkit-transform: rotate(45deg) transform: rotate(45deg)”>
<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/228909_10.jpg” alt=”盆栽” style=”-webkit-transform: scaleX(3); transform: scaleX(3)”>
<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/228909_10.jpg” alt=”盆栽” style=”-webkit-transform:translate(300px, -300px) skew(45deg); transform:translate(300px, -300px) skew(45deg);”>
これでどうなるか見てみましょう！！
すんごいことになってますね笑
transformプロパティはIEとFFはベンダープレフィックスなしでいけるみたいです!!
まわりの要素に影響しないというのがすごいですね!!
今回、トランスフォームでしたが、次回はトランジションやりますね。
これってけっこう面白いと思います！！
そしたら今から、銀行行ってきます！！サランヘヨ！！
