CSS（クロムの）説明とデモを変換します

2Dまたは3Dの要素への変換アプリケーションのプロパティを変換します。このプロパティは、要素に私たちを回転させることができ、スケール、または動きを傾けます。

変換：（CSS3の変換）

注意：これらの効果をスペースで区切って、重ね合わせたとき

効果：要素は、移動スケール、回転、細長い延伸することができます

変換：効果素子の形状、大きさ、位置を変更します

変換：変換方法を：

1、翻訳（）メソッド

軸xに沿ってX：（X）を変換

翻訳（Y）：y軸に沿ってY

translateXY（X、Y）軸Xに沿ってX、Y軸に沿ってY

コード：

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        #origin { 
            幅：100pxに。
            高さ：100pxに。
            背景 - 色：赤; 
        } 
        #translateX { 
            幅：100pxに。
            高さ：100pxに。
            背景 - 色：赤; 
            変換：移動X（100ピクセル）。
        } 
        #translateY { 
            幅：100pxに。
            高さ：100pxに。
            背景 - 色：赤;
            変換：移動Y（100pxに）; 
        } 
        #translateXY { 
            幅：100pxに。
            高さ：100pxに。
            背景 - 色：赤; 
            変換：（100pxに、100pxに）変換します。
        }
     </スタイル> 
</ head> 
<body> 

<DIV ID = "起点"> 
</ div> 
<DIV ID = "移動X"> 
</ div> 
<DIV ID = "移動Y"> 
</ div> 
<DIV ID = "translateXY"> 
</ div> 
</ BODY> 
</ HTML>

結果は以下の通りであります：

注意：移動Xに相当し、実際には、（200pxの）翻訳（200pxの）。

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        #origin { 
            幅：100pxに。
            高さ：100pxに。
            背景 - 色：赤; 
            変換：（200pxの）翻訳し; 
        } 
    </スタイル> 
</ HEAD> 
<BODY> 

の<divのid = "起源"> 
</ div> 
</ BODY> 
</ HTML>

効果：

翻訳（）メソッド3D変換

これは、z軸の変化以上です。

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <METAのcharset = "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 

        #parent { 
            幅：500pxなど; 
            高さ：500pxなど; 
            -webkit -perspective：1000px; / *レンズ、デフォルトでは中心部のレンズから面間隔、視点原点により* /調整することができる
            -webkit透視起源：は50pxは50px; / * *視点特定の位置/平面における
        } 

        #origin { 
            幅100ピクセル、
            高さ：100pxに; 
            位置：絶対; 
            トップ：0PX; 
            左：0PX; 
            背景色：赤。
        } 

        #translateZ { 
            幅：100pxに。
            高さ：100pxに。
            位置：絶対; 
            トップ：0PX。
            左：0PX。
            背景色：青。
            -webkit-変換：translate3d（は50px、は50px、は50px）。
        } 

    </スタイル> 
</ head> 
<body> 
<DIV ID = "親"> 
    <DIV ID = "起点"> 
    </ div> 
    <DIV ID = "translateZ"> 
    </ div> 
</ div> 
</ボディ> 
</ HTML>

視点は、このような条件の下で、親要素の属性を設定する必要があります

CSS（クロムの）説明とデモを変換します

変換：（CSS3の変換）

変換：変換方法を：

1、翻訳（）メソッド

翻訳（）メソッド3D変換

おすすめ