CSS の 2D 変換を使用すると、移動、回転、拡大縮小、ねじりなど、2 次元空間でいくつかの基本的な変換操作を実行できます。変換された要素は絶対に配置された要素と似ており、周囲の要素には影響しませんが、組み合わせることができます。周囲の要素が重なっている場合 違いは、変換された要素が変換前もページ上のスペースを占有していることです。
2D 変換を導入しましょう。
1. 移動translate()
左 (X 軸) と上 (Y 軸) の位置によって指定されるパラメーターに従って、現在の要素の位置から移動すると、位置決めと同様に、ページ上の要素の位置が変更されます。
1. 文法:
変換:translate(x,y);
あるいは別々に書いてもいいでしょう
変換:translateX(n);transform:translateY(n);
2. 重要なポイント:
(1) 2D 変換での移動を定義し、X 軸と Y 軸に沿って要素を移動します。
(2) 平行移動の最大の利点は、他の要素の位置に影響を与えないことです。
(3) 翻訳自体のパーセンテージは、それ自体の要素翻訳に相対的です (50%、50%)。
(4) インラインタグには影響しません。
例：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>実行結果:
2.回転rotate()
rotate() メソッドは、要素を時計回りに指定された角度で回転します。負の値を指定すると、要素が反時計回りに回転します。
構文: transfrom:rotate (回転角度)
重要なポイント:
回転 (度)、単位は度です。例:rotate(45deg);
角度が正の場合は時計回り、負の場合は反時計回りです。
デフォルトでは、時計回りの中心点が要素の中心点になります。
例：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <body><div></div></body></html>実行結果:
3. 2D 変換中心点変換原点:
文法：
変換原点:xy;
重要なポイント:
(1) x と y はスペースで区切られていることに注意してください。
(2) xy のデフォルトの中心点は要素の中心点 (50% 50%) です。
(3) xy (右左中央下上) のピクセルまたは方向名詞を設定することもできます。
4. ズームスケール()
scale() メソッドを使用すると、幅 (X 軸) と高さ (Y 軸) のパラメーターに応じて要素のサイズが増減します。
(1) 要素のサイズを変更する、要素を拡大または縮小する
(2) 負の数の場合は反転します。
(3) 関数の構文形式は次のとおりです。
スケール(SX,SY)
ここで、sx は水平方向のスケーリング率、sy は垂直方向のスケーリング率を表します。また、パラメータ sy は省略でき、デフォルト値は sx です。
例：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>実行結果:
5. スキュー()
2 つのパラメータ値が含まれており、それぞれ X 軸と Y 軸の傾斜角度を示します。2 番目のパラメータが空の場合、デフォルトは 0 です。負のパラメータは、反対方向に傾斜することを意味します。
(1) skewX(<angle>); は、X 軸 (水平方向) のみに傾けることを意味します。
(2) skewY(<angle>); は Y 軸 (垂直方向) のみに傾けることを意味します。
(3) 要素を異なる方向に傾けます。
(4) スキュー(a) はスキュー(a,0) と等しい
(5)スキュー(x,y)
(6) 単位角度deg
例：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><body><div></div></body></html>実行結果:
6.行列()
Matrix() 関数は、skew()、scale()、rotate()、translate() という関数の省略形と見なすことができ、すべての 2D 変換操作は、matrix() 関数を通じて同時に定義できます。関数の構文形式は次のとおりです。
行列(a,b,c,d,tx,ty)
matrix() 関数の 6 つのパラメータは、それぞれ、scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() に対応します。matrix() を使用して、さまざまな 2D 変換を実装できます。 、 のような：
変換(tx,ty)=行列(1,0,0,1,tx,ty);：
ここで、tx と ty は水平方向と垂直方向の平行移動値です。
回転(a)=行列(cos(a),sin(a),-sin(a),cos(a),0,0);
ここで、a は次数の値です。 sin(a) と -sin(a) の値を交換すると、回転を逆にできます。
スケール(sx,sy)=行列(sx,0,0,sy,0,0);
ここで、sx と sy は水平方向と垂直方向のスケーリング値です。
skew(ax,ay)=行列(1,tan(ay),tan(ay),1,0,0);
ここで、ax と ay は水平および垂直の値 (度単位) です。
例：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.on e{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}。 3月gin-left:40px;margin-top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,3) 0);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div ></body></html>実行結果:
matrix() メソッドと 2D 変換メソッドが 1 つに統合されました。
マトリックス方式には、回転、スケーリング、移動 (平行移動)、傾斜機能を含む 6 つのパラメーターがあります。
変換量を行列で表現する行列(a,b,c,d,x,y)
●acx
●バディ
●0 0 1
特定のケースを使用して練習してみましょう。
コードは次のとおりです。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Practicalcontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1 .0><title>ドキュメント</title><style>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;po sition:relative;left:0;color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{幅:200px;高さ:200px;背景色:青;transition:all1slinear ;float:left;}.transformElement:hover{/*transform:translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5) */transform:skew(-45d例:45度);}.クロック{幅:400px;高さ:400px;境界半径:50%;背景色:#Faa;位置:相対;}.stick{幅:4px;高さ:200px;背景色:ブルーe;position:absolute;left:198px;top:0;transition:all12slinear;transform-origin:centerbottom;}.stickshort{width:8px;height:100px;background-color:rgb(142, 21,248);位置:絶対;左:196ピクセル;上:100ピクセル;トランジション:all12slinear;変換原点:センターボトム;z-インデックス:2;}. Clock:hover.stick{transform:rotate(4320) deg);}. Clock:hover.stickshort{transform:rotate(360deg);}</style></head><body><!--<div></div><div></div>-- ><div><div></div><div></div></div></body></html>実行結果:
