ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSのtransform属性の使い方
CSSのtransform属性の使い方
- 藏色散人オリジナル
- 2019-05-30 09:31:013922ブラウズ
css 変換プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。構文は、transform: none|transform-functions です。
#CSS 変換属性を使用するにはどうすればよいですか?
関数: 変換属性は、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
構文:
transform: none|transform-functions
説明:
● none 定義は変換されません。
# 行列(n,n,n,n,n,n) 6 つの値の行列を使用して 2D 変換を定義します。
## Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16 個の値 4x4 行列を使用して 3D 変換を定義します。 # Translation(x,y) 2D 変換を定義します。## ● translation3d(x,y,z) 3D 変換を定義します。
#translateX(x) X 軸の値のみを使用して、変換を定義します。
#translateY(y) Y 軸の値のみを使用して、変換を定義します。
# TranslationZ(z) Z 軸の値だけを使用して 3D 変換を定義します。
#scale(x,y) 2D スケーリング変換を定義します。
#scale3d(x,y,z) 3D スケーリング変換を定義します。
#scaleX(x) X 軸の値を設定することでスケーリング変換を定義します。
#scaleY(y) Y 軸の値を設定してスケーリング変換を定義します。
#scaleZ(z) Z 軸の値を設定することで 3D スケーリング変換を定義します。
#rotate(angle) 2D回転を定義し、パラメータで角度を指定します。
#rotate3d(x,y,z,angle) 3D 回転を定義します。
#rotateX(angle) X 軸に沿った 3D 回転を定義します。
#rotateY(angle) Y 軸に沿った 3D 回転を定義します。
#rotateZ(angle) Z 軸に沿った 3D 回転を定義します。
● skew(x-angle,y-angle) X 軸と Y 軸に沿った 2D スキュー変換を定義します。
● skewX(angle) X 軸に沿った 2D スキュー変換を定義します。
● skewY(angle) Y 軸に沿った 2D スキュー変換を定義します。
##● パースペクティブ(n) 3D 変換要素のパース ビューを定義します。注:
Internet Explorer 10、Firefox、および Opera は、transform 属性をサポートしています。
Internet Explorer 9 は、代替の -ms-transform プロパティをサポートしています (2D 変換のみ)。 Safari と Chrome は、代替の -webkit-transform プロパティ (3D および 2D 変換) をサポートしています。 Opera は 2D 変換のみをサポートします。css 変換属性の使用例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>効果の出力:
以上がCSSのtransform属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。