ホームページ > ウェブフロントエンド > フロントエンドQ&A > css3 変換にはどのような特性がありますか?

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

青灯夜游
リリース: 2022-01-13 14:12:38
オリジナル
1612 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート