css3 変換にはどのような特性がありますか?-フロントエンドQ&A-php.cn

css3 変換にはどのような特性がありますか?

青灯夜游

リリース： 2022-01-13 14:12:38

オリジナル

1636 人が閲覧しました

css3 の変換属性は 6 つあります: 1. 変換; 2. 変換元; 3. 変換スタイル; 4. パースペクティブ; 5. パースペクティブ-オリジン; 6. バックフェイス-可視性。

css3 変換にはどのような特性がありますか?

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

CSS3 変換では、要素を移動、拡大縮小、回転、延長、または引き伸ばすことができます。

css3 変換にはどのような特性がありますか?

#css3 変換プロパティ (2D/3D 変換)

##Propertiestransformtransform-origintransform-styleパースペクティブperspective-originbackface-visibility例:

Description	CSS
2D または 3D 変換に適した要素	3
変換要素の位置を変更できます	3
3D空間内で要素をネストする方法を指定します	3
パースペクティブで 3D 要素がどのように表示されるかを指定します	3
3D 要素の下部位置を指定します	3
画面に面していないときに要素を表示するかどうかを定義します	3

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
			#rotate2D, #rotate3D {
			    width: 80px;
			    height: 70px;
			    color: white;
			    font-weight: bold;
			    font-size: 15px;
			    padding: 10px;
			    float: left;
			    margin-right: 50px;
			    border-radius: 5px;
			    border: 1px solid #000000;
			    background: red;
			    margin: 10px;
				transition:transform 2s;
				-webkit-transition:transform 2s; /* Safari */
			}
			#rotate2D:hover{
				transform: rotate(180deg);
			}
			#rotate3D:hover{
				transform: rotateY(180deg);
			}
        </style>
    </head>
    <body>
       <div id="rotate2D">2D 转换</div>
	   <div id="rotate3D">3D 转换</div>
    </body>
</html>

ログイン後にコピー

css3 変換にはどのような特性がありますか?

知識を広げる:

2D 変換方法

機能matrix(ntranslate(translateX(ntranslateY(nscale(#xxx,scaleX(n)scaleY(n)rotate(angle)skew(x-angle,skewX(angle)skewY(angle)#3D 変換方法

説明
,n,n,n, n ,n)6 つの値の行列を使用して 2D 変換を定義します。
#,y)X 軸と Y 軸に沿って要素を移動する 2D 変換を定義します。
)要素を X 軸に沿って移動する 2D 変換を定義します。
)Y 軸に沿って要素を移動する 2D 変換を定義します。
y)要素の幅と高さを変更する 2D スケーリング変換を定義します。
要素の幅を変更する 2D スケーリング変換を定義します。
要素の高さを変更する 2D スケーリング変換を定義します。
2D 回転を定義し、パラメータで角度を指定します。
y-angle)X 軸と Y 軸に沿った 2D スキュー変換を定義します。。
X 軸に沿った 2D スキュー変換を定義します。
Y 軸に沿った 2D スキュー変換を定義します。

機能説明n,nxx,yxx)y)z)#,y#)y)z)#rotate3d(,y,rotateX()X 軸に沿った 3D 回転を定義します。 rotateY()Y 軸に沿った 3D 回転を定義します。 rotateZ()Z 軸に沿った 3D 回転を定義します。 perspective() 3D 変換された要素のパースビューを定義します。 css ビデオチュートリアル)

	matrix3d(
,n,n,n,n,n,n ,n,n,n,n ,n,n,n,n)16 個の値 4x4 を使用して 3D 変換を定義しますマトリックス。	translate3d(
,z)3D 変換を定義します。	translateX(
X 軸に使用される値のみを使用して、3D 変換を定義します。	translateY(
Y 軸に使用される値のみを使用して、3D 変換を定義します。	translateZ(
Z 軸に使用される値のみを使用して、3D 変換を定義します。	scale3d(
,z)3D スケーリング変換を定義します。	scaleX(
X 軸の値を指定して、3D スケーリング変換を定義します。	scaleY(
Y 軸の値を指定して 3D スケーリング変換を定義します。	scaleZ(
Z 軸値を指定して、3D スケーリング変換を定義します。	xx
z,angle)3D 回転を定義します。	angle
	angle
	angle
	n
	(学習ビデオ共有:

以上がcss3 変換にはどのような特性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。