Понимание z-смещения в трансформационном происхождении

Question

Я пытаюсь изучить свойство происхождения преобразования и как именно это свойство работает. Я сделал небольшую демо-версию HERE.

HTML:

<div class="section-title"> 
     <span data-hover="Product Range">Product Range</span> 
    </div> 

CSS:

.section-title { 
       text-align: center; 
       margin: 50px 0px; 
       color: #FFF; 
       text-transform: uppercase; 
       perspective: 1000px; 
      } 

      .section-title span { 
       font-size: 2em; 
       position: relative; 
       display: inline-block; 
       padding: 0px 14px; 
       background: #2195DE none repeat scroll 0% 0%; 
       transition: transform .3s ease 0s; 
       transform-origin: 50% 0px 0px; 
       transform-style: preserve-3d; 
      } 

      .section-title span::before { 
       position: absolute; 
       top: 100%; 
       left: 0px; 
       width: 100%; 
       height: 100%; 
       background: #0965A0 none repeat scroll 0% 0%; 
       content: attr(data-hover); 
       transition: #000 .3s ease 0s; 
       transform: rotateX(-90deg); 
       transform-origin: 50% 0; 
       text-align: center; 
      } 

      .section-title span:hover, .section-title span:focus { 
       transform: rotateX(90deg) translateY(-22px); 
      } 

      .section-title span:hover::before, .section-title span:focus::before { 
       background: #28A2EE none repeat scroll 0% 0%; 
      } 

Теперь, если вы посмотрите на свойства преобразования происхождения он имел следующее определение в таблице стилей:

transform-origin: 50% 0 0; 

Я изменил его на:

transform-origin: 50% 0; 

и видел нет разница. Моя проблема заключается в понимании значения свойства оси z в свойстве transform-origin и что ВИЗУАЛЬНАЯ разница есть без него.

MDN имеет следующее определение для г-ось объекта:

г смещением ::

является (и никогда не бывает что сделает заявление недействительного), описывающее, как далеко от пользовательский глаз устанавливается в z = 0.

, но, несмотря на определение, я не понимаю или воссоздаю любой такой пример, в котором z-offset делает любую визуальную разницу.

Может кто-нибудь здесь, пожалуйста, помогите мне понять, какое значение имеет z-смещение в tranform-origin? может ли кто-нибудь представить визуальный пример того, что делает z-offset?

Answer 1

Во-первых, значение z-offset для transition-origin работает только с 3D-преобразованиями. К счастью, у вас есть один в вашей скрипке, но кажется, что единственное, что вы пробовали, было ноль (значение по умолчанию); не вводить значение, совпадает с вводом 0, по умолчанию. Подумайте об этом как о том же принципе, что и z-index: вы говорите ему, как близко к экрану он должен быть.

Там есть важное предостережение: значения в z-offset перепутаны от z-index (а также translateZ). Чем выше z-index будет перемещать элементы ближе к экрану (поскольку контекст штабелирования начинается с 0 и выше штабелирования уровень приблизит вас к экрану), но высшееz-offsetдвижется происхождение элемента дальше (так как в z-offset описывает, как вдалеке элемент transform-origin должен быть, высшие значения z-смещения = дальше).

Чтобы понять 3D-график, рассмотрите эти оси с точки зрения луча оси z, движущегося прямо к нам.

Глядя на этом графике, установив г-смещение -38px бы сдвигает точку спектрально-происхождения такого элемента немного ближе к нам. Напротив, z-смещение 38px будет перемещать точку происхождения трансформации немного дальше.

В этом примере, однако, элемент span уже повернут на 80 градусов (я выбрал 80 вместо 90, чтобы вы могли видеть поворот немного легче) вдоль оси X. Это делается сначала, так как 3D Transforms являются кумулятивными, поэтому каждое преобразование выполняется поэтапно (это также означает, что преобразования родителей наследуются их дочерними элементами). Так что, действительно, график сверху теперь можно считать поворотным, а луча оси z направлена ​​вниз, а луч оси y - от нас.

Давайте рассмотрим ваш пример и изменим z-смещение дополнительной грани до -38px (длина (его высота, в терминах CSS) лица, которая изначально видима), чтобы увидеть, как она движется дальше от ее точки начала , Учитывая, что луч оси z указывал вниз после того, как мы применили RotateX(-80deg), это означает, что элемент z-offset должен двигаться вниз (поскольку отрицательные значения z-смещения означают «приблизить») к нижней части окна просмотра.

.section-title { 
 
    text-align: center; 
 
    margin-top: 50px; 
 
    color: #FFF; 
 
} 
 
.section-title span { 
 
    font-size: 36px; 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 0px 14px; 
 
    background: #2195DE; 
 
    transition: transform .5s ease; 
 
    transform-style: preserve-3d; 
 
} 
 
.section-title span::before { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0px; 
 
    width: 150px; 
 
    height: 100%; 
 
    background: #2195DE; 
 
    content: "test"; 
 
    transform: rotateX(-80deg); 
 
    transform-origin: 0px 0px -38px; 
 
    text-align: center; 
 
    
 
} 
 
.section-title span:hover { 
 
    transform: rotateX(80deg); 
 
} 
 
.section-title span:hover::before { 
 
    transform-origin: 0px 0px 0px; 
 
}

<div class="section-title"> 
 
    <span>Product Range</span> 
 
</div>

Теперь г-смещением лица (созданное с ::before) переместилось ближе к нижней части окна просмотра. Это означает, что 38 пикселей (так как каждая сторона имеет длину 38 пикселей) ближе к экрану, если бы мы не повернули его на 80 градусов. Я снова установил его на 0px при наведении курсора, поэтому он снова возвращается в нормальное положение, как вы можете видеть, зависая.

Это свойство полезно для создания 3D-преобразований типично трехмерных элементов. Самым очевидным выбором является шестисторонний штамп. Вы должны использовать z-offset для создания обратной стороны матрицы (вместе с backface-visibility: hidden;, чтобы мы не видели через элемент).