前回に引き続き、trabsitionを利用した動作、アニメーションを
試してみました。
今回は、transformsプロパティを活用してみました。
実際の指定値を弄る場合と比べて、
いくつか注意しなければならない点もありそうです。
http://sysgole.web.fc2.com/index.html
前回同様、左右それぞれの●に色々試してみました。
あとは、しれっと以前から使ってましたが、
メニューバーのアニメーションもこの組み合わせを使ってます。
<CSS transforms>
◎transforms
[特徴・使用上の注意]
1. 要素に2D変形、または、3D変形を適用する。
2. マトリクス変形、移動、縮尺、回転、傾斜を利用できる。
3. 親要素から子要素へのスタイルの継承(値の継承)は無い。※1
4. 2017/5/4時点でWDの為※2、ベンダープレフィックスを利用する。※3
5. ()内の数値はカンマ区切りで記載する。
6. X軸(水平)、Y軸(垂直)、Z軸(奥行き)の概念がある。ピンとこない人はグラフを思い出すと良い。
7. 一つのプロパティで複数のプロパティ値を決められるので組み合わせは熟慮する。
8. none≠0である。
9. marginが効かなくなる。
10.ブロックレベル要素・インライン要素に適用可能。 ※5
■transforms: ☆;
[凡例]
■ベンダープレフィックス
☆プロパティ値
matrix() ・・・要素を2D変形させる。
matrix3d() ・・・要素を3D変形させる。
translate() ・・・要素の表示位置を移動させる。
scale() ・・・要素を拡大・縮小させる。
rotate() ・・・要素を回転させる。
skew() ・・・要素を傾斜変形させる。
perspective() ・・・3D変形の遠近効果を調節する。
☆matrix(a, b, c, d, e, f)
行列を使用して、
数Cとか線形代数学でしたっけ。
ここで、行列の概念を思い起こしたり、
学びなおすよりも、それぞれの値が、
どのプロパティ値に対応しているかを
覚えておく方が重要。
[凡例]
a ・・・水平方向の縮尺 ・・・scaleX();と同義
b ・・・垂直方向の傾斜率 ・・・skewY();と同義
c ・・・水平方向の傾斜率 ・・・skewX();と同義
d ・・・垂直方向の縮尺 ・・・scaleY();と同義
e ・・・水平方向の移動距離 ・・・translateX();と同義
f ・・・垂直方向の移動距離 ・・・translateY();と同義
☆こんなプロパティ値もあります。
none ★初期値
☆matrix3d()
ちょっと数学的要素が多すぎるので、
今回は割愛。
☆translate()
[特徴・使用上の注意]
1. Z軸方向の指定効果がいまいちつかめず。←課題
要素の表示位置を変更させることが出来る。
X方向は左右、Y方向は上下、Z方向は奥・手前を指します。
単位は基本的にどれでも行けそうだが、
translateZ()プロパティ値ではパーセンテージ値(%)を指定することができない。
transform:translate(X方向の距離, Y方向の距離);
transform:translateX(X方向の距離);
transform:translateY(Y方向の距離);
transform:translateZ(Z方向の距離);
transform:translate3d(X方向の距離, Y方向の距離, Z方向の距離);
☆こんなプロパティ値もあります。
none ★初期値
☆scale()
[特徴・使用上の注意]
1. 各要素値を指定しないと、変化が完了した後に消える。変化させない場合は1倍指定する。
2. z方向をnoneとした際の動きがいまいちつかめない。←課題
X方向は左右、Y方向は上下、Z方向は奥・手前を指すので、
X: width
Y: hieght
に対応していると言えますね。
ただここでは、元の大きさに対しする比率を指定します。
0.5： 元のサイズの1/2
1: 元のサイズと同等
2: 元のサイズの2倍
マイナス値を指定すると、縮小した後に上下反転します。
これが正しい挙動なのかは不明ですが…。
transform:scale(X方向の倍率, Y方向の倍率);
transform:scaleX(X方向の倍率);
transform:scaleY(Y方向の倍率);
transform:scaleZ(Z方向の倍率);
transform:scale3d(X方向の倍率, Y方向の倍率, Z方向の倍率);
☆こんなプロパティ値もあります。
none ★初期値
☆rotate()
[特徴・使用上の注意]
1. 角度の指定単位はdeg(degree)もしくは、rad(radian)。
2. よっぽどの事が無い限り1°＝1degとなるdegの方が使い勝手が良いと思う。
3. 360degで1回転、720degで2回転なので、回転させたい回数に合わせて指定する。
4. 2D回転＝Z軸方向への回転。なので、rotate();＝rotateZ();となる。
5. X・Y・Zはどの軸を回転軸にするかを指す。
6. rotate3d()を使う事で、複数の回転軸に対する回転角度を指定できる。
アクロバティックな変化をさせるなら、rotate3d()が便利。
その他については、どの軸に対して回転させたいかをイメージしながら指定するとよい。
transform:rotate(回転角度); ・・・Z軸に対する回転角度と同義
transform:rotateX(X軸に対する回転角度);
transform:rotateY(Y軸に対する回転角度);
transform:rotateZ(Z軸に対する回転角度);
transform:rotate3d(X方向の比率, Y方向の比率, Z方向の比率);
☆skew()
[特徴・使用上の注意]
1. 角度の指定単位はdeg(degree)もしくは、rad(radian)。
2. よっぽどの事が無い限り1°＝1degとなるdegの方が使い勝手が良いと思う。
transform:skewX(X軸の傾斜角度);
transform:skewY(Y軸の傾斜角度);
transform:skew(X軸の傾斜角度,Y軸の傾斜角度);
☆perspective()
いまいち効果を感じなかったので要確認。
一部挙動が正しいのかどうなのか怪しい部分あり。
skew()が、正しく動作してるのかと言うところと、
各プロパティ値の、Z軸方向への指定が上手く効いてるのかですね。
そもそも奥行きの概念てどういうときに使うべきなんでしょうね。
頭でイメージ出来てても、いまいちそれを形にできませんでした。