CSS3 2D変換

CSS3 変換

CSS3 変換を通じて、要素を移動、拡大縮小、回転、延長、または引き伸ばすことができます。

ブラウザのサポート

IE10、FireFox、および Opera は、transform 属性をサポートします。 Chrome と Safari にはプレフィックス -webkit-.

注: IE9 にはプレフィックス -ms- が必要です。

scale()

skew()

matrix()

translate() メソッド

要素は、指定された左 (x 座標) と上 (y 座標) に従って、現在の位置から移動します。変位パラメータ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    /*translate方法位移*/
        div {
        width:100px;
        height:80px;
        background-color:orange;
        position:absolute;
        left:100px;
        top:100px;
        }
        div.one {
        transform:translate(30px,30px);
        z-index:1;
        }
        div.two {
        background-color:blue;
        }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

rotate() メソッド

要素の時計回りの指定された角度、負の値が許可され、要素は反時計回りに回転されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div {
    width: 150px;
    height: 50px;
    background-color: orange;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    }
    div.one {
    transform: rotate(30deg);
    -webkit-transform:rotate(30deg);
    }
    div.two {
    background-color: blue;
    color: white;
    }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

scale()メソッド

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 100px;
    height: 100px;
    }
    div.one {
    background-color: red;
    transform: scale(0.5,0.5);
    }
</style>
</head>
<body>
   <div>
     <div class="one"></div>
   </div>
</body>
</html>

skew()メソッドskew()メソッドでは、指定された水平線(X軸)に従って、指定された角度だけ要素を傾けます。および垂直線 (Y 軸) パラメーター:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    background-color:red;
    transform:skew(30deg,10deg);
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

matrix() メソッド

matrix() メソッドは、すべての 2D 変換メソッドを組み合わせます。

matrix() メソッドは 6 つのパラメーターを受け取り、要素の回転、拡大縮小、移動、傾斜を可能にする数学関数が含まれています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    background-color:red;
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

新しい変換プロパティ

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

プロパティ

CSS

MTransform は 2D または 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 スキュー変換を定義します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div{ width:100px; height:100px; background-color:orange; position:absolute; left:100px; top:100px; } div.one { transform:matrix(0.866,0.5,-0.5,0.866,0,0); background-color:red; } </style> </head> <body> <div></div> <div class="one"></div> </body> </html>

提出するリセットコード

自動運転