Свойство perspective-origin

Описание

Задаёт координаты точки, куда смотрит наблюдатель. Это свойство работает совместно со свойством perspective и определяет точку сходимости линий при перспективе.

Позиция:
[ проценты | размер | left | center | right | top | bottom] |
[[ проценты | размер | left | center | right ] &&
[ проценты | размер | top | center | bottom ]]

- left = left center = 0 50% — центр левого края;
- center = center center = 50% 50% — центральная точка;
- right = right center = 100% 50% — центр правого края;
- top = center top = 50% 0 — центр верхнего края;
- bottom = center bottom 50% 100% — центр нижнего края;
- left top = 0 0 — левый верхний угол;
- left bottom = 0 100% — левый нижний угол;
- right top = 100% 0 — правый верхний угол;
- right bottom = 100% 100% — правый нижний угол.

Синтаксис

perspective: none | размер;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .cube {
 font-size: 5em;
 width: 2em;
 height: 2em;
 margin: 0.5em;
 margin-left: 1em;
 transform-style: preserve-3d;
 perspective: 500px;
 animation: move-origin infinite 2s;
 }
 .side {
 position: absolute;
 width: 2em;
 height: 2em;
 background: rgba(255, 99, 71, 0.6);
 border: 1px solid rgba(0, 0, 0, 0.5);
 color: white;
 text-align: center;
 line-height: 2em;
 }
 .front {
 transform: translateZ(1em);
 }
 .top {
 transform: rotateX(90deg) translateZ(1em);
 }
 .right {
 transform: rotateY(90deg) translateZ(1em);
 }
 .left {
 transform: rotateY(-90deg) translateZ(1em);
 }
 .bottom {
 transform: rotateX(-90deg) translateZ(1em);
 }
 .back {
 transform: rotateY(-180deg) translateZ(1em);
 }
 @keyframes move-origin {
 0% {
 perspective-origin: 0 0;
 }
 25% {
 perspective-origin: 100% 0;
 }
 50% {
 perspective-origin: 100% 100%;
 }
 75% {
 perspective-origin: 0 100%;
 }
 100% {
 perspective-origin: 0 0;
 }
 }
 </style>
 <div class='cube'>
 <div class='side front'>1</div>
 <div class='side back'>6</div>
 <div class='side right'>4</div>
 <div class='side left'>3</div>
 <div class='side top'>5</div>
 <div class='side bottom'>2</div>
 </div>
</body>
</html>
1
6
4
3
5
2

Читайте также

Стиль первой строки форматированного текста

Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки ...

Свойство box-decoration-break

Указывает, как оформлять фрагменты текста при его переносе на другую строку. Работает только для ...

Свойство padding-bottom

Устанавливает расстояние от внутреннего нижнего края рамки элемента до воображаемого прямоугольника.

Свойство background-blend-mode

Описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

Свойство border-right

Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.<br><br&...