CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3でz軸を使用して要素を回転変換します

[rotateZ（an​​gle）]メソッドを使用して、CSS3でz軸を使用して要素を回転変換します-

例

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg);
            /* Safari */
            transform: rotateZ(90deg);
            /* Standard syntax */
         }
      </style>
   </head>
   <body>
      <p>rotate Z axis</p>
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

出力

CSS3でz軸を使用して要素を回転変換します


  1. CSS32D変換関数の操作

    2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要

  2. CSS33D変換関数の操作

    3D変換を使用して、要素をx軸、y軸、およびz軸に移動できます。以下は、CSS33D変換のメソッドの一部です- 以下のメソッドは、3D変換を呼び出すために使用されます- Sr.No。 値と説明 1 matrix3d（n、n、n、n、n、n、n、n、n、n、n、n、n、n、n、n） 行列の16個の値を使用して要素を変換するために使用されます 2 translate3d（x、y、z） x軸、y軸、z軸を使用して要素を変換するために使用されます 3 translateX（x） x軸を使用して要素を変換するために使用されます 4 tr