Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Добавляет доку про perspective-origin #5524

Merged
merged 8 commits into from
Oct 24, 2024
Merged

Добавляет доку про perspective-origin #5524

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
419df27
Добавляет доку про `perspective-origin`
ra1nbow1 Oct 9, 2024
a58308c
Update index.md
ra1nbow1 Oct 9, 2024
fc9e290
Update index.md
ra1nbow1 Oct 9, 2024
14a8316
Редактирует доку
solarrust Oct 14, 2024
d7ab668
Добавляет демку для `perspective-origin`
ra1nbow1 Oct 14, 2024
d1b252d
Добавляет демку в доку
ra1nbow1 Oct 14, 2024
bc599ea
Красит в дока-цвета
skorobaeus Oct 23, 2024
bfc71cb
Занудствует над списками
skorobaeus Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions css/perspective-origin/demos/perspective-origin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>perspective-origin</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}

h1 {
margin-bottom: 20px;
}

.box-container {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}

.box {
width: 150px;
height: 150px;
background-color: #4CAF50;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
perspective: 600px;
transition: perspective-origin 0.5s;
}

.box-inner {
width: 100%;
height: 100%;
background-color: #ff5722;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
transform: rotateY(45deg);
transition: transform 1s;
}

.controls {
margin-top: 20px;
}

select {
padding: 5px;
font-size: 16px;
}

.box:hover .box-inner {
transform: rotateY(180deg);
}
</style>
</head>
<body>

<div class="box-container">
<div class="box" id="box1">
<div class="box-inner">Пример</div>
</div>
<div class="box" id="box2">
<div class="box-inner">текста</div>
</div>
<div class="box" id="box3">
<div class="box-inner">в демо</div>
</div>
</div>

<div class="controls">
<label for="origin-select">perspective-origin:</label>
<select id="origin-select">
<option value="50% 50%">center (50% 50%)</option>
<option value="0% 0%">top left (0% 0%)</option>
<option value="100% 0%">top right (100% 0%)</option>
<option value="0% 100%">bottom left (0% 100%)</option>
<option value="100% 100%">bottom right (100% 100%)</option>
</select>
</div>

<script>
const boxes = document.querySelectorAll('.box');
const select = document.getElementById('origin-select');

select.addEventListener('change', function () {
const value = this.value;
boxes.forEach(box => {
box.style.perspectiveOrigin = value;
});
});
</script>

</body>
</html>
42 changes: 37 additions & 5 deletions css/perspective-origin/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,54 @@
title: "`perspective-origin`"
description: "Определяем позицию смотрящего по отношению к 3D-объекту."
authors:
- doka-dog
- ra1nbow1
related:
- css/perspective
- css/numeric-types
- css/animation
tags:
- doka
- placeholder
---

## Кратко

Свойство `perspective-origin` определяет точку схода 3D-пространства, созданного при помощи свойства [`perspective`](/css/perspective/).
Свойство `perspective-origin` определяет точку схода 3D-пространства, созданного при помощи свойства [`perspective`](/css/perspective/). Оно задаёт, откуда происходит наблюдение за элементом в 3D-пространстве, словно определяет положение камеры в сцене.

## Пример

Наблюдатель смотрит из центра по горизонтали и снизу по вертикали:

```css
.element {
perspective: 500px;
perspective-origin: 50% 100%;
}
```
<iframe title="Позиция смотрящего" src="demos/perspective-origin/" height="500"></iframe>

## Как пишется

Можно указать в качестве значения одно или два числа в любых доступных [единицах измерения](/css/numeric-types/). Если указано одно значение, то оно воспринимается как точка на оси _x_. Если два, то первое значение относится к оси _x_, а второе к оси _y_. Отсчёт начинается от верхнего левого угла элемента.
Можно указать одно или два значения в любых доступных [единицах измерения](/css/numeric-types/). Если указано одно значение, оно воспринимается как точка на оси _x_. Если указано два значения, первое относится к оси _x_, а второе к оси _y_.

Отсчёт начинается от верхнего левого угла элемента:

- Значение `0 0` означает, что наблюдатель смотрит с верхнего левого угла.
- Значение `100% 100%` задаёт позицию наблюдателя в правом нижнем углу.

Вместо чисел можно использовать ключевые слова и их комбинации: `top`, `bottom`, `left`, `right`, `center`.

### Наследование

Свойство `perspective-origin` не наследуется, оно должно быть явно задано для каждого элемента, если необходимо изменить точку наблюдения.

## Как понять

`perspective-origin` работает вместе с `perspective` для создания 3D-эффектов. Без `perspective` это свойство не имеет смысла. Оно не влияет на 2D-пространство и применяется только в сочетании с другими 3D-трансформациями, например, `rotate3d`, `translate3d`, и `scale3d`.

### Связь с `transform-origin`

Важно не путать `perspective-origin` с [`transform-origin`](/css/transform-origin/). В то время как `perspective-origin` управляет точкой обзора наблюдателя, `transform-origin` задаёт центр трансформации самого элемента. Эти два свойства могут работать совместно для создания сложных 3D-анимаций.

## Подсказки

Вместо конкретных чисел можно использовать ключевые слова и их комбинации: `top`, `bottom`, `left`, `right`, `center`.
💡 Используйте проценты для гибкого позиционирования точки зрения. Это позволит сохранить пропорции, если размер элемента изменится.
Loading