CSS3 2D変換
CSS3 2D 変換
CSS3 変換
CSS3 変換では、要素を移動、拡大縮小、反転、回転、ストレッチすることができます。
それはどのように機能しますか?
変形効果を使用すると、要素の形状、サイズ、位置を変更できます。
2D または 3D 要素を使用して変換できます。
2D変換
この章では、2D変換方法について学びます:
translate()
rotate()
scale()
-
スキュー()
matrix()
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:200px;
height:100px;
background-color: #aeffb1;
/* 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() メソッド
translate() メソッドを左のとおりに実行します (X) -軸)と上 (Y 軸) 位置 指定されたパラメータで、現在の要素の位置から移動します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #9dfff2;
border:1px solid #e81d26;
}
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>这是一个div元素</div>
<div id="div2">Hello. 这也是一个div元素</div>
</body>
</html>プログラムを実行して試してみましょう
ヒント: 変換値 (50px、100px) は、左の要素から 50 ピクセル、上から 100 ピクセル移動します。
rotate() メソッド
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()メソッド
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()メソッドを試します。要素は水平線(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: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()メソッド
matrix()メソッドと2D変換メソッドが1つに統合されました。
matrix メソッドには、回転、スケーリング、移動 (平行移動)、傾斜関数を含む 6 つのパラメーターがあります。
例
matrix()メソッドを使用してdiv要素を30°回転させます
<!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 |
|---|---|---|
| transform | 2D または3D 変換 | 3 |
| transform-origin | を使用すると、変換要素の位置を変更できます | 3 |
2D変換メソッド
| 関数 | 説明 |
|---|---|
| 行列( 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 スキュー変換を定義します。 |
