CSSのtransform属性の使い方-フロントエンドQ&A-php.cn

CSSのtransform属性の使い方

藏色散人

リリース： 2019-05-30 09:31:01

オリジナル

3892 人が閲覧しました

css 変換プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。構文は、transform: none|transform-functions です。

CSSのtransform属性の使い方

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