ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3 変換にはどのような特性がありますか?
css3 変換にはどのような特性がありますか?
- 青灯夜游オリジナル
- 2022-01-13 14:12:381604ブラウズ
css3 の変換属性は 6 つあります: 1. 変換; 2. 変換元; 3. 変換スタイル; 4. パースペクティブ; 5. パースペクティブ-オリジン; 6. バックフェイス-可視性。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 変換では、要素を移動、拡大縮小、回転、延長、または引き伸ばすことができます。
#css3 変換プロパティ (2D/3D 変換)
| 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>
2D 変換方法
| 説明 | |
|---|---|
| ,n,n,n, n ,n)6 つの値の行列を使用して 2D 変換を定義します。 | |
| #,y)X 軸と Y 軸に沿って要素を移動する 2D 変換を定義します。 | |
| )要素を X 軸に沿って移動する 2D 変換を定義します。 | |
| )Y 軸に沿って要素を移動する 2D 変換を定義します。 | |
| y)要素の幅と高さを変更する 2D スケーリング変換を定義します。 | scaleX( |
| 要素の幅を変更する 2D スケーリング変換を定義します。 | scaleY( |
| 要素の高さを変更する 2D スケーリング変換を定義します。 | rotate( |
| 2D 回転を定義し、パラメータで角度を指定します。 | skew( |
| y-angle)X 軸と Y 軸に沿った 2D スキュー変換を定義します。 。 | skewX( |
| X 軸に沿った 2D スキュー変換を定義します。 | skewY( |
| Y 軸に沿った 2D スキュー変換を定義します。 | #3D 変換方法 |
| matrix3d( | n|
|---|---|
| ,n,n,n,n,n,n ,n,n,n,n ,n,n,n,n)16 個の値 4x4 を使用して 3D 変換を定義しますマトリックス。 |
translate3d( | xx
| ,z)3D 変換を定義します。 | translateX( | xx
| X 軸に使用される値のみを使用して、3D 変換を定義します。 | translateY( | y
| Y 軸に使用される値のみを使用して、3D 変換を定義します。 | translateZ( | z
| Z 軸に使用される値のみを使用して、3D 変換を定義します。 | scale3d( |
| ,z)3D スケーリング変換を定義します。 | scaleX( |
| X 軸の値を指定して、3D スケーリング変換を定義します。 | scaleY( | y
| Y 軸の値を指定して 3D スケーリング変換を定義します。 | scaleZ( | z
| Z 軸値を指定して、3D スケーリング変換を定義します。 | #rotate3d(xx | ,
| z,angle)3D 回転を定義します。 | rotateX(angle | )
| rotateY( | angle | )
| rotateZ( | angle | )
| perspective( | n | )
| (学習ビデオ共有: | css ビデオ チュートリアル
以上がcss3 変換にはどのような特性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。