css3にはどのような変形機能があるのでしょうか？-フロントエンドQ&A-php.cn

css3にはどのような変形機能があるのでしょうか？

青灯夜游

リリース： 2022-03-18 15:35:55

オリジナル

2223 人が閲覧しました

css3 の変形機能には、1. 回転、rotate()、rotateX() などで実装、2. スケーリング、scale()、scaleX() などで実装、3 の 4 種類があります。 . 傾斜、skew()、skewX() などを使用して実装; 4. 移動、translate() などを使用して実装。

css3にはどのような変形機能があるのでしょうか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

変換の主な価値は、変換関数を使用して、テキストまたは画像の回転、拡大縮小、傾き、移動の 4 つのプロセスを実現することです。

1. 回転-----transform:rotate(xxdeg);

(IE9 以降、Safari 3.1 以降上記、ブラウザ chrome 8 以降、FireFox 4 以降、Opera 10 以降はすべてこれらの属性をサポートしています)

最初に例を見てみましょう:

<p id="test3">
     这是一个测试。
</p>
#test3{
     width:300px;
     margin: 100px auto;
     font-size: 40px;
     transform:rotate(45deg);
      }

ログイン後にコピー

transform:rotate(45deg); これ文は p 要素が時計回りに 45 度回転することを意味し、deg は角度の単位です。効果は次のとおりです:

##2. Zoom-----transform:scale(x)

<p id="test4">
        这是一个测试。
</p>

 #test4{
          width:300px;
          margin: 100px auto;
          font-size: 40px;
          transform:scale(0.5);  
  }

ログイン後にコピー

要素の水平方向と垂直方向のスケーリングを個別に指定することもできます。たとえば、要素は水平方向に 50% 縮小し、垂直方向に 2 倍になります:

<p id="test5">
    这是一个测试。
</p>

#test5{
   width:300px;
   margin: 100px auto;
   font-size: 40px;
   transform:scale(0.5,2);  
}

ログイン後にコピー

上記 2 つのスケーリングの効果は次のとおりです:

3. 傾き: スキュー法 を使用して、文字や画像の傾き処理を実現します。2 つのパラメータは、それぞれ水平方向の傾き角度と垂直方向の傾き角度を指定します。例:

<p id="test6">
    这是一个测试。
</p>

#test6{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:skew(30deg,45deg);      
 }

ログイン後にコピー

パラメータが 1 つだけの場合、デフォルトでは、垂直方向ではなく水平方向のみに傾斜します。

4. 移動:translate メソッドを使用し、2 つのパラメータでそれぞれ水平方向と垂直方向の移動距離を指定します。パラメータが 1 つだけの場合、デフォルトでは水平方向のみに移動し、垂直方向には移動しません。

<p id="test7">
        这是一个测试。
</p>

 #test7{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:translate(150px,150px);  
 }

ログイン後にコピー

これらの変換は組み合わせて使用することもできます:

<p id="test8">
        这是一个测试。
</p>

#test8{
    width:300px;
    margin: 100px auto;
    font-size: 40px;
    transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px);      
  }

ログイン後にコピー

要素を時計回りに 45 度回転し、半分に縮小してから、それぞれ水平方向に 30 度、垂直方向に 45 度傾けます。水平方向と垂直方向の効果は次のとおりです。

変換の基点を指定できます。変換を使用して変換する場合、要素の中心は次のとおりです。基準点として使用されます。原点は、transform-origin 属性を使用して変更できます。

<p id="test9">
    这是一个测试。
</p>

<p id="test10">
    这是一个测试。
</p>

#test9{
     position: absolute;
      width:150px;
      height:150px;
      background: green;
      margin: 100px 200px;
      font-size: 20px;
      transform:rotate(45deg);  
      }#test10{
      position: absolute;
      width:150px;
      height:150px;
      background: red;
      margin: 100px 200px;
      font-size: 20px;
      transform-origin:left top; /*定基准点*/
      transform:rotate(45deg)      
      }

ログイン後にコピー

効果は次のとおりです: (赤は基点を左上の点に移動します。緑はデフォルトです)