css властивість perspective-origin

Задає координати точки, куди дивиться спостерігач. Це властивість працює спільно з perspective і визначає точку збіжності ліній при перспективі. Приклад значення: perspective-origin: x-axis, y-axis, де x-axis та y-axis можуть приймати значення у %, а також left, right, length.

Властивість регулює положення нащадків елементу. Тому якщо ви хочете побачити ефект дії цієї властивості на елементі, задавайте її для його батька.

правити

Нотатка

Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка backface-visibility може змінюватися у майбутньому.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

perspective-origin: x-axis y-axis|initial|inherit;

Властивість perspective-origin може отримувати 4 значень:

x-axis

Визначає, де вид знаходиться на вісі х

автор: Svitlana

правити

y-axis

Визначає, де вид знаходиться на вісі у

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
perspective-origin	36.0 <br> 12.0 -webkit-	16.0 <br> 10.0 -moz-	4.0 -webkit-	23.0 <br> 12.0 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
perspective-origin	3.0 -webkit-	16.0 <br> 10.0 -moz-	6.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="scene one"><div class="card">центр</div></div>
<div class="scene two"><div class="card">10% 10%</div></div>

.scene {
    display: inline-block;
    margin-right: 32px;
    perspective: 300px;
}

.two {
    perspective-origin: 10% 10%;
}

.card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #0172ad;
    color: #fff;
    transform: rotateY(45deg);
}