2017-01-05 10 views
1

下の図を見てください。実際にはY +軸はチャートの上にあり、Y軸はチャートの下に向かっています。つまり、正のY値で表される点はチャートの上にあり、負のY値で表される点は下にあるはずです。translate()のY軸の逆の動作をします。

enter image description here

しかし、私は私のコードでtransform: translate(50px,100px)を使用する場合、それはブロー画像のように現れています。あなたが見ることができるように、たとえYの値を変換することが陽性であっても、要素はページの下に向かってプッシュされています。

enter image description here

代わりに、下の画像(「右形式」ボックスを参照してください)、つまり、それは上部に向かってプッシュされるべきで同様にする必要があります。

enter image description here

は慎重に画像をご参照ください(は画像にタイプミスを許しなさい)。

マイコード:以下

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 300px; 
    height: 100px; 
    background-color: yellow; 
    border: 1px solid black; 
    transform: translate(50px,100px); /* Standard syntax */ 
} 
</style> 
</head> 
<body> 

<div> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore consequatur amet nemo numquam, a perspiciatis maxime necessitatibus laudantium adipisci tempore, 
</div> 

</body> 
</html> 
+1

私はあなたが達成したいことを本当に理解していません。 divを画面の左下に表示しますか? –

+0

@ABSiddik:私の理解が間違っていれば、それは非常に良い質問ですが、私はあなたが言語の問題のためにそれをよりよく説明できないと思います。私は質問を改善しました(私の理解に基づいて)。正しくない場合は、それをロールバックして(または)必要な修正を加えてください。 – Harry

答えて

2

W3C Spec for Transform Rendering Modelからの抽出物である:

座標空間を、2つの軸を持った座標系である:水平右方向にX軸が増加します。 Y軸が垂直下向きに増加する。 3次元変換関数は、この座標空間を3次元に拡張し、スクリーンの平面に垂直なZ軸を追加し、観察者に向かって増加させる。

enter image description here

それは座標あなたが正の値により変換するとき、要素は、(代わりに上がっていくの)下降Y軸増大垂直下方ので、システムおよび副を使用して見ることができるように-versa。

+1

ありがとうございます –

+0

ようこそ@ABSiddik。ニースの質問も! – Harry

関連する問題