По оси Y, работающей противоположным способом для перевода()

Посмотрите на изображение ниже, на самом деле ось Y + находится в верхней части диаграммы, а ось Y - в нижней части диаграммы. То есть точка, представленная положительным значением Y, должна находиться в верхней части диаграммы, тогда как точка, представленная отрицательным значением Y, должна быть внизу.По оси Y, работающей противоположным способом для перевода()

Но когда я использовал transform: translate(50px,100px) в моем коде, тогда он показывает вверх как удар изображения. Как видите, элемент подталкивается к нижней части страницы, хотя значение перевода Y положительно.

Вместо этого он должен быть, как на рисунке ниже (см поле «Правый формат»), то есть, он должен быть прижат к вершине. (Пожалуйста, простите за опечатку в образе)

Пожалуйста, смотрите изображение тщательно.

Мой код:

<!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>

источник

2017-01-05 AB Siddik

Я не совсем понимаю, чего вы хотите достичь. Вы хотите, чтобы ваш div находился в нижнем левом углу экрана? –

@ABSiddik: Если мое понимание было правильным, это очень хороший вопрос, но я думаю, вы не смогли объяснить это лучше из-за языковых проблем. Я улучшил вопрос (основываясь на моем понимании этого). Если это неверно, не стесняйтесь откатывать (или) внести необходимые исправления. – Harry

Ниже приводится выдержка из W3C Spec for Transform Rendering Model:

координатного пространства является система координат с двумя осями: повышается значение оси Х по горизонтали вправо; ось Y увеличивается вертикально вниз. Функции трехмерного преобразования расширяют это координатное пространство на три измерения, добавляя ось Z, перпендикулярную плоскости экрана, которая возрастает по направлению к зрителю.

Как вы можете видеть его использует систему координат, где по оси Y увеличивается вертикально вниз и поэтому при переводе на положительное значение, то элемент перемещается вниз (вместо того, чтобы идти вверх) и вице- -versa.

источник

2017-01-05 08:32:00 Harry

Спасибо за информацию –

Добро пожаловать @ABSiddik. Хороший вопрос! – Harry

По оси Y, работающей противоположным способом для перевода()

ответ

Смежные вопросы