Преобразование CSS3 переводит процентные значения относительно его ширины и/или высоты?

Я думаю, это правда, что когда мы выполняем трансформацию CSS3, используя процентное значение, то этот процент относится к собственной ширине или высоте, поэтому (50%, 75%) означает 50% его собственной ширины, 75% от собственной высоты, но я не могу найти никаких спецификаций, которые говорят об этом.

Пример: https://jsfiddle.net/cstsyw3s/1/
с использованием:

transform: translate(100%, 100%)

Я просмотрел http://www.w3.org/TR/css3-transforms, но не могу найти там упоминания об этом - я смог найти только, например, для transform-origin, «проценты: относятся к размеру ограничивающей рамки», и я думаю, что ограничивающая рамка, вероятно, представляет собой прямоугольник с шириной и высотой элемента. (не включая границу)... но я не могу найти определение ограничивающей рамки, кроме SVG и таблицы.


css css-transforms
person nonopolarity    schedule 31.12.2015    source источник

Ответы (3)


arrow_upward
11
arrow_downward

В этом разделе http://www.w3.org/TR/css3-transforms/#transform-property в нем указано:

Проценты: см. размер ограничивающей рамки

Определение ограничивающей рамки (источник)

Ограничивающая рамка — это ограничивающая рамка объекта для всех элементов SVG без связанной рамки макета CSS и граница для всех остальных элементов. Ограничивающая рамка таблицы — это граничная рамка ее обертки, а не ее табличная рамка.

И рамка (источник)

Свойства ширины и высоты включают отступы и границы, но не поля. Обратите внимание, что отступы и границы будут внутри поля, например. .box {ширина: 350 пикселей; граница: 10 пикселей сплошной черный цвет;} ведет к окну, отображаемому в браузере, шириной: 350 пикселей.

надеюсь, это поможет

person cocoa    schedule 31.12.2015
comment
Ясно... так что это указано для transform, а не translate... для строки. Ограничивающая рамка - это ограничивающая рамка объекта для всех элементов SVG без связанного поля макета CSS и рамки для всех других элементов, я прочитайте это как... Ограничительная рамка - это ограничивающая рамка объекта для всех элементов SVG без (связанного поля макета CSS и рамки для всех других элементов)... неудивительно, что я не знал, что это значит в конце ... Я просто думал, что речь идет об элементах SVG - person nonopolarity; 01.01.2016
comment
Это то, что ты искал? - person cocoa; 01.01.2016
comment
Чтобы быть предельно ясным: проценты преобразования основаны на размере собственной ограничивающей рамки трансформированного элемента, а не на размере ограничивающей рамки, содержащей преобразованный элемент. Он основан на собственном размере, в отличие от ширины, высоты, полей и т. д. - person Chris Calo; 06.11.2018

arrow_upward
0
arrow_downward

Да, ты прав. Transform translate перемещает элемент либо на определенное количество пикселей, если используется px, либо на процент от размера перемещаемого элемента, если используется %.

Итак, если бы у вас был div class='mover', этот css переместил бы div на 250 пикселей по осям x и y.

.mover {width: 100px;
height: 100px;
-webkit-transform: translate(250%, 250%);
background: #000;}

Вот простой jsfiddle, с которым можно поиграть в качестве примера.

person Miles    schedule 31.12.2015

arrow_upward
0
arrow_downward

В хроме (проверено в версии 59) процент рассчитывается на основе размеров ограничивающей рамки и границы.

Если элемент имеет ширину 200 пикселей и границу 50 пикселей, и мы применяем что-то вроде преобразования: translate(100%, 0) Общее расстояние перевода составляет 200 пикселей + 50 * 2 = 400 пикселей.

В этом случае, если вы хотите, чтобы расстояние перевода было 100 пикселей, вы всегда можете добавить box-sizing:border-box

section {
  width:400px;
  height:400px;
  background: #f0ad4e;
}

span {
  display:block;
  background:red;
  width:200px;
  height:200px;
  border:100px solid black;
  transform: translate(100%, 0);
}
<section>
  <span class="center">hello world</span>
</section>

Пример: https://jsfiddle.net/httcg329/1/

person Linghua Jin    schedule 10.08.2017