CSS3 2D変換


CSS3 変形では、要素を移動、拡大縮小、反転、回転、ストレッチすることができます。

CSS3 Transforms

それはどのように機能しますか?

変形効果を使用すると、要素の形状、サイズ、位置を変更できます。

2D または 3D 要素を使用して変換できます。

ブラウザのサポート

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

-webkit-、-ms-、または -moz- の直前の数字は、このプレフィックス属性をサポートする最初のブラウザーのバージョン番号です。

Internet Explorer 10、Firefox、および Opera は、transform 属性をサポートしています。

Chrome および Safari には、プレフィックス -webkit- version が必要です。

注: Internet Explorer 9 には、プレフィックス -ms- version が必要です。

2D変換

この章では、2D 変換メソッドについて学びます: )

  • 次の章では、3D 変換について学びます。

  • インスタンス

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

  • インスタンスの実行»

    • 「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

    • translate()メソッド

左のとおり() X 軸) および先頭 パラメータで指定された (Y 軸) 位置が、現在の要素の位置から移動されます。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:translate(50px,100px);
	-ms-transform:translate(50px,100px); /* IE 9 */
	-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

例の実行 »「例の実行」ボタンをクリックしてオンライン例を表示します

変換値 (50px、100px) は要素を左から 50 ピクセル、100 ピクセル移動します。上からピクセル数。

rotate() メソッド

Translate

rotate() メソッドは、要素を指定された度だけ時計回りに回転します。負の値を指定すると、要素が反時計回りに回転します。

インスタンス
<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>你好。这是一个 DIV 元素。</div>

<div id="div2">你好。这是一个 DIV 元素。</div>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンライン例を表示します

値の回転 (30 度) 要素は時計回りに 30 度回転します。

scale() メソッド

Rotate

scale() メソッドでは、幅 (X 軸) と高さ (Y 軸) のパラメーターに応じて要素のサイズが増加または減少します。

インスタンス 
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

scale(2,4) は、幅を元のサイズの 2 倍に、高さを元のサイズの 4 倍に変換します。

skew() メソッド

Skew

skew() メソッド、この要素は水平 (X 軸) と垂直 (Y 軸) の線パラメーターに基づいて角度を与えます:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:skew(30deg,20deg);
	-ms-transform:skew(30deg,20deg); /* IE 9 */
	-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

インスタンスを実行する »

オンラインの例を表示するには、[例の実行] ボタンをクリックしてください

skew(30deg,20deg) は、X 軸と Y 軸の周りに 20 度および 30 度の要素です。

matrix() メソッド

Rotate

matrix() メソッドと 2D 変換メソッドが 1 つに統合されました。

matrix メソッドには、回転、スケーリング、移動 (平行移動)、傾斜関数を含む 6 つのパラメーターがあります。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください


新しい変換プロパティ

すべての変換プロパティは以下にリストされています:

プロパティ説明CSS
transform2Dまたは3D変換に適した要素3
transform-originを使用すると、変換された要素の位置を変更できます3

2D変換方法

関数の説明
matrix(n,n,n,n,n,n) 6 つを使用して 2D 変換を定義します値マトリックス。
translate(x,y)は、X 軸と Y 軸に沿って要素を移動する 2D 変換を定義します。
translateX(n) は、X 軸に沿って要素を移動する 2D 変換を定義します。
translateY(n)は、要素をY軸に沿って移動する2D変換を定義します。
scale(x,y) は、要素の幅と高さを変更する 2D スケーリング変換を定義します。
scaleX(n) は、要素の幅を変更する 2D スケーリング変換を定義します。
scaleY(n) は、要素の高さを変更する 2D スケーリング変換を定義します。
rotate(angle)は、パラメーターで角度を指定して、2D 回転を定義します。
skew(x-angle,y-angle)は、X 軸と Y 軸に沿った 2D スキュー変換を定義します。
skewX(angle) は、X 軸に沿った 2D スキュー変換を定義します。
skewY(angle)は、Y 軸に沿った 2D スキュー変換を定義します。