perspective-origin в CSS


CSS3 Свойство perspective-origin

Пример

Установить базовое расположение 3D элементов:

div
<
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari */
-webkit-perspective-origin: 10% 10%; /* Safari */
>

Попробуйте сами »

Поддержка Браузерами

Свойство perspective-origin не поддерживается ни одним браузером.

Safari поддерживает альтернативное свойство -webkit-perspecitve-origin.

Определение и Использование

Свойство perspective-origin определяет, где располагается 3D элемент на осях x и y. Это свойство позволяет вам изменять нижнее положение 3D элементов.

При указании свойства perspective-origin для элемента, именно его ДОЧЕРНИЕ элементы позиционируются, а НЕ сам элемент.

Замечание: Это свойство должно использоваться вместе со свойством perspective и воздействует только на 3D трансформированные элементы!

CSS :: Свойство perspective-origin

css -свойство perspective-origin (от англ. perspective origin – исходная точка для перспективы) задает координаты X и Y точки сходимости линий (т.е. местоположения глаз зрителя при взгляде на экран). По умолчанию эта точка находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рис. №1).

Рис. №1. Пример смещения точки сходимости линий при использовании перспективы

Свойство perspective-origin должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

Характеристики

  • Значение по умолчанию: 50% 50% .
  • Применяется: к трансформируемым элементам .
  • Наследуется: нет .
  • Анимируется: да .
  • JavaScript: object.style.perspectiveOrigin=»value» .

Синтаксис

= [ | | left | center | right | top | bottom] | [[ | | left | center | right ] && [ | | top | center | bottom ]]

Значения

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий:

  • координата X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • координата Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X , а для координаты Y будет использовано значение по умолчанию.

Ссылки

Подробно о трансформации элементов в нашем учебнике здесь.

CSS perspective-origin

The CSS perspective-origin property is used to determine the vanishing point for a 3D effect. It defines which position the user is looking at the 3D object.

Use this property on an element’s parent element in order to see the effect on the child element.

The perspective-origin property is used in conjunction with the perspective property, which adjusts the intensity of the 3D effect.

Илон Маск рекомендует:  Что такое код ora_fetch

Syntax


Possible Values

Explanation of values:

x-position

The following values are allowed for the x-position:

Specifies the position relative to the width of the element. The value may be negative. Specifies the position using a length value. The value may be negative. left Specifies the position as being at the left. This is the same as the 0 length value. right Specifies the position as being at the right. This is the same as the 100% percentage value. center Specifies the position as being at the center. This is the same as the 50% percentage value.

y-position

The following values are allowed for the y-position:

Specifies the position relative to the width of the element. The value may be negative. Specifies the position using a length value. The value may be negative. top Specifies the position as being at the top. This is the same as the 0 length value. bottom Specifies the position as being at the bottom. This is the same as the 100% percentage value. center Specifies the position as being at the center. This is the same as the 50% percentage value.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

In HTML, a transformable element is either:

  • a block-level or atomic inline-level element
  • or whose CSS display property computes to table-row , table-row-group , table-header-group , table-footer-group , table-cell , or table-caption

In SVG, a transformable element is an element which has the attributes transform , patternTransform or gradientTransform .

Inherited? No Media Visual Computed Value For the absolute value, otherwise a percentage. Animatable Yes (see example)

CSS3 perspective-origin Property

Description

The perspective-origin CSS property defines the origin (the vanishing point for the 3D space) for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.

The following table summarizes the usages context and the version history of this property.

Default value: 50% 50%
Applies to: Transformable elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

[ x-position y-position ] | initial | inherit

Note: If only one value is specified for the perspective-origin property, the second value is assumed to be center , which is equal to 50% value.

The example below shows the perspective-origin property in action.

Example

Note: If at least one of the two values is not a keyword, then the first value represents the horizontal position (or offset) and the second value represents the vertical position (or offset) of the perspective origin.

Property Values

The following table describes the values of this property.

Represents the horizontal position (or offset) of the perspective origin. It can have one of the following values:

  • percentage — Defines the offset relative to the width of the element.
  • length — Defines the offset using a length value.
  • left — Equal to 0% or a zero width.
  • center — Equal to 50% or half the width of the box.
  • right — Equal to 100% or the full box width.

Represents the vertical position (or offset) of the perspective origin. It can have one of the following values:

  • percentage — Defines the offset relative to the height of the element.
  • length — Defines the offset using a length value.
  • top — Equal to 0% or a zero height.
  • center — Equal to 50% or a half the height of the box.
  • bottom — Equal to 100% or the full box height.


Value Description
x-position
y-position
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element perspective-origin property.

Browser Compatibility

The perspective-origin property is supported in all major modern browsers.

СSS3 Свойство perspective-origin

Пример

Определите, с какой позиции пользователь смотрит на 3D позиционированный элемент:

Определение и использование

Свойство perspective-origin определяет, с какой позиции пользователь смотрит на 3D позиционированный элемент.

При определении свойство perspective-origin для элемента, это дочерние элементы, которые получат эффект, а не сам элемент.

Примечание: Это свойство должно использоваться в сочетании с perspective!

Чтобы лучше понять свойство perspective-origin, просмотр демо-версии.

Значение по умолчанию: 50% 50%
Унаследованный: нет
Анимируемый: да Прочитайте о animatable Попробовать
Версия: CSS3
JavaScript синтаксис: object.style.perspectiveOrigin=»10px 50%» Попробовать

Числа, за которыми следует -webkit — или -moz- указывают первую версию, которая работала с префиксом.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit — или -moz- указывают первую версию, которая работала с префиксом.

Свойство CSS origin-origin

Свойство origin-origin в CSS используется для определения позиции, в которой пользователь ищет трехмерный объект, т.е. точку схода трехмерного объекта.

Синтаксис:

Стоимость недвижимости:

  • Ось X: представляет горизонтальное положение исходного положения. Возможные значения оси X перечислены ниже:
    • процент (%): устанавливает ось х в процентах.
    • длина: это определяет длину оси х.
    • left: устанавливает позицию слева по оси x.
    • cente: устанавливает центр положения по оси x.
    • right: я устанавливаю положение вправо по оси X.
  • Ось Y: представляет вертикальное положение исходного положения. Возможные значения оси Y перечислены ниже:
    • процент (%): он устанавливает положение оси Y в процентах.
    • длина: устанавливает позицию с точки зрения длины.
    • top: устанавливает верхнюю позицию по оси y.
    • center: устанавливает центральную позицию по оси Y.
    • bottom: Устанавливает нижнюю позицию по оси Y.
  • initial: он устанавливает для свойства origin-origin значение по умолчанию.
  • унаследовать: свойство origin-origin наследуется от его родителя.

perspective-origin

Easily manage projects with monday.com

The perspective-origin property determines the origin for the perspective property. Think of it as the vanishing point of the current 3D-space.

Note as for the perspective property, perspective-origin has to be defined on the parent element in order to give the transformed children depth.

The perspective-origin property doesn’t do anything by itself. It has to be defined on an element along with perspective .

Below is a demo showing how a 3D cube behaves when altering its vanishing point by changing the perspective-origin value (constants).

Hey, let’s animate the perspective-origin, just for fun!

  1. It starts at `0% 0%` (top left)
  2. Then go to `100% 0%` (top right)
  3. Then to `100% 100%` (bottom right)
  4. Then to `0% 100%` (bottom left)
  5. Then go back to 1. and restart


Other Resources

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

CSS perspective-origin Свойство

Пример

Определите, с какого положения пользователь смотрит на 3D-позиционный элемент:

Определение и использование

Свойство perspective-origin определяет позицию, с которой пользователь смотрит на 3D-позиционный элемент.

При определении свойства perspective-origin для элемента, это дочерние элементы, которые получат эффект, а не сам элемент.

Примечание: Это свойство должно использоваться совместно с свойством перспектива!

Чтобы лучше понять свойство перспективы-Origin, Просмотрите демонстрацию.

Значение по умолчанию: 50% 50%
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.perspectiveOrigin=»10px 50%»

Поддержка браузера

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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

CSS Perspective and Perspective-Origin Properties

Contents

CSS perspective explained

By using the CSS perspective property, you can specify the distance of a 3D element in pixels:

Note: CSS perspective does not change the rendering of the element. For that, use transform: perspective().

The syntax for CSS perspective

The only value you need to define is the distance:

The default value is none , which means no CSS perspective transformations. You can set a custom value by using length units (e.g., pixels or ems).

Theory is great, but we recommend digging deeper!
CSS Tricks for Beginners: Essential Tips on How to Use CSS Code

Defining the CSS perspective origin

When you’re using the perspective CSS property, the center of the element becomes its vanishing point by default. To define a custom point, you can also apply perspective-origin :

The syntax for this property is rather simple – you need to specify the position in relation to both horizontal and vertical axes:

perspective-origin: x-axis y-axis;

You can use use percentages or keywords – left , center , or right for the horizontal and top , center , or bottom for the vertical value.

Note: CSS perspective-origin will not work without perspective .

CSS3 perspective-origin Property

пример

Набор размещения базовых 3D-элемента:

Определение и использование

Свойство перспектива-происхождения определяет, где 3D элемент основан в х- и у-оси. Это свойство позволяет изменять нижнюю позицию 3D-элементов.

При определении собственности в перспективе единства происхождения для элемента, то дочерние элементы, которые расположены, а не сам элемент.

Note: Это свойство должно быть использовано вместе с перспективной собственности, а влияет только на 3D трансформировали элементы!

Чтобы лучше понять свойства перспектива единства происхождения, просмотреть демонстрацию .

Значение по умолчанию: 50% 50%
Наследование: no
Animatable: yes. Read about animatable Try it
Версия: CSS3
Синтаксис JavaScript: object .style.perspectiveOrigin=»10px 50%» Try it

Поддержка браузеров

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.

Илон Маск рекомендует:  Как повернуть изображение
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL