Я пытаюсь изучить свойство источника преобразования и как именно это свойство работает. Я сделал небольшую демонстрациюВОТ.

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, оно имеет следующее определение в таблице стилей:

transform-origin: 50% 0 0;

Я изменил это на:

transform-origin: 50% 0;

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

MDN имеет следующее определение для свойства оси z:

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

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

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

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