CSS3の2D変形は何種類あるのでしょうか？

css3 には 4 種類の 2D 変形があります: 1. 水平方向または垂直方向に指定された距離だけ要素を移動する変位 translation(); 2. 水平方向または垂直方向に要素を拡大縮小する Scale() ; 3 、回転rotate()、要素を回転できます; 4. Skew()、要素を傾けることができます。

【推奨チュートリアル:CSS ビデオ チュートリアル】

トランジションは CSS3 の破壊的な機能の 1 つです。要素の変位、回転、変形、スケーリングを実現し、マトリックス手法もサポートしています。すぐに学ぶトランジションとアニメーションの知識を使えば、これまで Flash でしか実現できなかった多数の効果を置き換えることができます。

変換transform

1.移動translate(x, y)

translate(50px,50px);

translate メソッドを使用して、テキストまたは画像を水平方向および垂直方向に 50 ピクセルずつ垂直に移動します。

要素の位置を変更できます。x と y は負の値にすることができます。

translate(x,y) は水平方向と垂直方向に同時に移動します (つまり、 X 軸と Y 軸が同時に移動します)
TranslationX(x) は水平方向のみに移動します (X 軸の移動)
TranslationY(Y) は垂直方向のみに移動します (Y 軸の移動)

.box { width: 499.9999px; height: 400px; background: pink; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 走的自己的一半 */ }

配置されたボックスを水平にします Center

2, スケールscale(x, y)

transform:scale(0.8,1);

要素を水平方向に合計できます。垂直方向のスケーリングも可能です。このステートメントでは、スケール メソッドを使用して要素を水平方向に 20% 縮小しますが、垂直方向にはスケールしません。

scale(X,Y) 要素を水平方向と垂直方向に同時にスケールします (つまり、X 軸と Y 軸を同時にスケールします)
scaleX(x) 要素のみ水平方向にスケーリングします (X 軸のスケーリング)
scaleY(y) 要素は垂直方向にのみスケーリングします (Y 軸のスケーリング)

scale() のデフォルト値は 1 です。は 0.01 ～ 0.99 に設定されます。任意の値を指定すると要素が小さくなり、1.01 以上の値を指定すると要素が拡大します

#3. 回転 回転(度)

transform:rotate(45deg);

要素を回転すると、座標
• 順序を調整すると問題が解決します。回転を最後に置きます。
• 単位は度であることに注意してください。

body { background-color: skyblue; } .container { width: 100px; height: 150px; border: 1px solid gray; margin: 300px auto; position: relative; } .container > img { display: block; width: 100%; height: 100%; position: absolute; transform-origin: top right; /* 添加过渡 */ transition: all 1s; } .container:hover img:nth-child(1) { transform: rotate(60deg); } .container:hover img:nth-child(2) { transform: rotate(120deg); } .container:hover img:nth-child(3) { transform: rotate(180deg); } .container:hover img:nth-child(4) { transform: rotate(240deg); } .container:hover img:nth-child(5) { transform: rotate(300deg); } .container:hover img:nth-child(6) { transform: rotate(360deg); }

ログイン後にコピー

4. 斜めのスキュー(度、度)

transform:skew(30deg,0deg);

p{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */

nbsp;html>    

位置決めボックスは完全に中央に配置されており、次のように書かれています

nbsp;html>    

nbsp;html>    
  

nbsp;html>    
       

プログラミング学習 Web サイト

以上がCSS3の2D変形は何種類あるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。