Css свойство transform

Значения свойства

Значение Описание
none Преобразование не применяется.
matrix(n,n,n,n,n,n) Применяет 2D преобразование с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Определяет смещение, только по оси Х.
translateY(y) Определяет смещение, только по оси У.
translateZ(z) Определяет 3D смещение, только по оси Z.
scale(x,y) Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент.
Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin.
scale3d(x,y,z) Применяет 3D преобразование масштаба.
scaleX(x) Определяет преобразование масштаба по оси Х.
scaleY(y) Определяет преобразование масштаба по оси У.
scaleZ(z) Определяет 3D преобразование масштаба по оси Z.
rotate(angle) Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,angle) Определяет 3D поворот.
rotateX(angle) Определяет 3D поворот вдоль оси Х.
rotateY(angle) Определяет 3D поворот вдоль оси У.
rotateZ(angle) Определяет 3D поворот вдоль оси Z.
skew(x, y) Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X.
skewX(angle) Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle) Определяет 2D преобразование наклона вдоль оси У.
perspective(n) Определяет перспективу для преобразования 3D элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

transform:

Результат:

Демонстрация работы свойтсва transform.

CSS Код:

#myDIV { background-color: lightblue; transform: rotate(10deg); }

Кликните на любое значение свойства, чтобы увидеть результат

Какие возможности предоставляют отдельные свойства преобразования?

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

На первый взгляд можно было бы ожидать, что элемент будет повернут на 10 градусов (), а затем при наведении курсора добавит к исходному преобразованию масштабирование (). Однако, свойство будет переопределено, поэтому вращение потеряется при наведении курсора. По мере того, как усложняются различные состояния или взаимодействия, может быть тяжело поддерживать все желаемые варианты преобразований.

С отдельными свойствами преобразования можно добавлять или удалять отдельные трансформации, не влияя на остальные. Таким образом, можно немного изменить код и получить желаемый результат, в котором элемент при наведении одновременно поворачивается и масштабируется.

Теперь можно применить или анимацию по отдельности. В этом примере масштабирование и перемещение изменяются при наведении курсора с разной продолжительностью и задержкой. Поворот не выполняется в и не влияет на анимации двух других свойств.

See this code Independent Transform Properties on x.xhtml.ru.

Точка трансформации

Как упоминалось ранее, по умолчанию точкой трансформации является центр элемента, 50% по горизонтали и 50% по вертикали. Чтобы изменить это положение, может быть использовано свойство transform-origin.

Свойство transform-origin может принимать одно или два значения. Когда задано только одно значение, то оно используется для горизонтальной и вертикальной осях. Если указаны два значения, то первое применяется для горизонтальной оси, а второе для вертикальной.

Отдельно значения похожи на позиционирование фонового изображения с помощью размера или ключевых слов. Таким образом, 0 0 аналогично значению top left, а 100% 100% то же самое, что и bottom right. Более конкретные значения также могут быть установлены, к примеру, 20px 50px задаст исходную точку элемента как 20 пикселей от края и 50 пикселей вниз.

HTML

CSS

Демонстрация transform-origin

Следует отметить, что свойство transform-origin в действительности порождает некоторые проблемы, когда одновременно применяется значение translate у трансформации. Так как они оба пытаются позиционировать элемент, их значения могут вступать в противоречие

Используйте их с осторожностью, лишний раз убедившись что получен желаемый результат

Transforming a FrameworkElement

To apply transformations to a FrameworkElement, create a Transform and apply it to one of the two properties that the FrameworkElement class provides:

  • LayoutTransform – A transform that is applied before the layout pass. After the transform is applied, the layout system processes the transformed size and position of the element.

  • RenderTransform – A transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits.

Which property should you use? Because of the performance benefits that it provides, use the RenderTransform property whenever possible, especially when you use animated Transform objects. Use the LayoutTransform property when scaling, rotating, or skewing and you need the parent of the element to adjust to the transformed size of the element. Note that, when they are used with the LayoutTransform property, TranslateTransform objects appear to have no effect on elements. That is because the layout system returns the translated element to its original position as part of its processing.

For additional information about layout in Windows Presentation Foundation (WPF), see Layout overview.

Resumo

A Propriedade CSS  permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.

Se a propriedade tem um valor diferente de none, um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para  position: fixed para os elementos que estão contidos.

Initial value
Aplica-se a qualquer elemento transformavel
Inherited não
Percentages refer to the size of bounding box
Midia visual
Computed value as specified, but with relative lengths converted into absolute lengths
Animation type a transform
Canonical order the unique non-ambiguous order defined by the formal grammar
Creates stacking context yes

Example: Rotate a FrameworkElement 45 Degrees

The following example uses a RotateTransform to rotate a button clockwise by 45 degrees. The button is contained in a StackPanel that has two other buttons.

By default, a RotateTransform rotates about the point (0, 0). Because the example does not specify a center value, the button rotates about the point (0, 0), which is its upper-left corner. The RotateTransform is applied to the RenderTransform property. The following illustration shows the result of the transformation.

Clockwise rotation 45 degrees from upper-left corner

The next example also uses a RotateTransform to rotate a button 45 degrees clockwise, but it also sets the RenderTransformOrigin of the button to (0.5, 0.5). The value of the RenderTransformOrigin property is relative to the size of the button. As a result, the rotation is applied to the center of the button, instead of its upper-left corner. The following illustration shows the result of the transformation.

Clockwise rotation 45 degrees around center

The following example uses the LayoutTransform property instead of the RenderTransform property to rotate the button. This causes the transformation to affect the layout of the button, which triggers a full pass by the layout system. As a result, the button is rotated and then repositioned because its size has changed. The following illustration shows the result of the transformation.

LayoutTransform used to rotate the button

Description

Various coordinate models can be used to describe an HTML element’s size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation .

In CSS (and most computer graphics), the origin represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that’s 2 units to the right and 5 units down would be , while a point 3 units to the left and 12 units up would be .

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

acbd

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

acbdxy=ax+cybx+dy

It is even possible to apply several transformations in a row:

a1c1b1d1a2c2b2d2=a1a2+c1b2a1c2+c1d2b1a2+d1b2b1c2+d1d2

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector must be expressed separately, as two additional parameters.

Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can express translations as linear functions.

Transform Origin

Sets the origin for an element’s transformations.

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the function is the center of rotation.

The property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If two or more values are defined and either no value is a keyword, or the only used keyword is , then the first value represents the horizontal offset and the second represents the vertical offset.

  • One-value syntax: The value must be a length, a percentage, or one of the keywords , , , , and .
  • Two-value syntax: One value must be a length, a percentage, or one of the keywords , , and . The other value must be a length, a percentage, or one of the keywords , , and .
  • Three-value syntax: The first two values are the same as for the two-value syntax. The third value must be a length. It always represents the .

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

The rotateZ() Method

The method rotates an element around its Z-axis at a given degree:

Example

#myDiv
{
 
transform: rotateZ(90deg);
}

CSS Transform Properties

The following table lists all the 3D transform properties:

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when not facing the screen

CSS 3D Transform Methods

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4×4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

❮ Previous
Next ❯

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a duration of 2 seconds:

Example

div
{  width: 100px;  height: 100px; 
background: red;  transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div> element:

Example

div:hover
{
  width: 300px;
}

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

Когда применяются свойства offset?

Три новых независимых свойства преобразования применяются до свойств . Функции применяются после .

  1. (distance, anchor, rotate …)
  2. (здесь можете устанавливать свой порядок)

Так, например, использование базовой анимации вернёт различный визуальный результат, если объединить ее с или .

See this code transform:translate vs translate with offset-path on x.xhtml.ru.

Довольно интересно (и часто сбивает с толку) то, как все они взаимодействуют друг с другом. Однако знание последовательности преобразований — это уже половина решения в прояснении магии, происходящей с , отдельными свойствами преобразования и траекторией движения.

Какие CSS свойства анимируются?

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств ограничен определенным набором.

Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.

Значение свойства является сложным случаем. Спецификация не рекомендует анимировать в значение и из значения . Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с  следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.

Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью или удаления его . Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии

Самый простой способ преодолеть это ограничение — применить  c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.

CSS transform functions

The CSS property allows the coordinate system used by an element to be manipulated using transform functions. These functions are described below.

transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d build the transformation matrix
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix .

Note: Gecko (Firefox) accepts a value for tx and ty. Webkit (Safari, Chrome) and Opera currently support a unitless for tx and ty.

Live examples

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);

See also

  • Wikipedia
  • Coordinate transformation matrices mathamazement.com
  • Microsoft’s matrix filter MSDN
transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */

Rotates the element clockwise around its origin (as specified by the property) by the specified . The operation corresponds to the matrix .

transform:  scale(sx);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

Specifies a 2D scaling operation described by . If isn’t specified, it is assumed to be equal to .

transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */

Specifies a scale operation using the vector .

transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */

Specifies a scale operation using the vector .

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

transform:  skew(ax)       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */

Skews the element around the X and Y axes by the specified angles. If isn’t provided, no skew is performed on the Y axis.

Note: The function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.
To achieve the same effect, use if you were using with one parameter or , for the general way. Note that tan() isn’t a CSS function and you have to precalculate it yourself.

transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */

Skews the element around the X axis by the given .

transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */

Skews the element around the Y axis by the given .

transform:  translate(tx)  /* one or two <length> values */

Specifies a 2D translation by the vector . If isn’t specified, its value is assumed to be zero.

transform:  translateX(tx)       /* see <length> for possible values */

Translates the element by the given amount along the X axis.

transform:  translateY(ty)       /* see <length> for possible values */

Translates the element by the given amount along the Y axis.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Анимируйте неанимируемые свойства в keyframes

Вы, конечно, подумали, что это шутка. Все знают, что нет смысла анимировать то, что анимировать нельзя по определению. И в вакууме – да, вы правы. Но на практике бывают моменты, когда мы таки можем поменять какое-то неанимируемое свойство и получить от этого эффект, которого по другому не добиться никак.

На самом деле тут происходит некоторая игра слов – например свойство visibility формально является “анимируемым”, но по факту мы не можем плавно перевести его значение из одного в другое. Так что здесь мы говорим скорее о свойствах, которые “нельзя плавно изменить”.

Поведение неанимируемых свойств в keyframes плохо поддается систематизированию. По идее они должны меняться в конце анимации или в конце фрейма, после которого их поменяли, но на практике в разных браузерах это может происходить по-разному, особенно если мы говорим про IE/Edge, который нет-нет да и встречается в требованиях. Да и у Safari бывают свои тараканы в голове. Видимо светлое будущее еще не наступило. Так что, во избежание встречи с разными редкими багами, воспользуемся небольшой уловкой.

Для того, чтобы точно знать, когда наше значение изменится, нам понадобится ограничить промежуток времени, на котором будет происходить изменение его значения. Так, вне зависимости от поведения браузера, мы получим, что оно поменяется плюс-минус в тот же миг, что и нужно нам.

Для начала небольшой пример, как это вообще возможно. На примере z-index:

Здесь мы прямо посреди анимации создаем два фрейма на расстоянии 1% от анимации и меняем значение неанимируемого свойства

Нам не так важно, как там браузер решит – поменять его в конце, в середине, или даже в начале второго фрейма – при расстоянии в 1% мы никогда не заметим разницу. Останется только найти в анимации момент, когда этот переход не будет бросаться в глаза

В качестве примера возьмем вот такую абстрактную штуку:

Обратите внимание на то, как точки уходят друг под друга по очереди. Без изменения z-index мы бы не смогли получить такой эффект

Это, разумеется, надуманный эксперимент, но и на более приземленном сайте может возникнуть ситуация, когда нам нужно какое-нибудь уведомление сначала вывести над каким-то элементом, а потом убрать под него, и там такой прием будет очень кстати.

transform:rotate(x) — вращение объекта

Чтобы вращать элемент существует команда rotate(x). Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

На странице преобразуется в следующее

Примечание

Свойства:

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

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover, в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

Transform Classes

Windows Presentation Foundation (WPF) provides the following 2D Transform classes for common transformation operations:

Class Description Example Illustration
RotateTransform Rotates an element by the specified Angle. Rotate an Object
ScaleTransform Scales an element by the specified ScaleX and ScaleY amounts. Scale an Element
SkewTransform Skews an element by the specified AngleX and AngleY amounts. Skew an Element
TranslateTransform Moves (translates) an element by the specified X and Y amounts. Translate an Element

For creating more complex transformations, Windows Presentation Foundation (WPF) provides the following two classes:

Class Description Example
TransformGroup Groups multiple TransformGroup objects into a single Transform that you can then apply to transform properties. Apply Multiple Transforms to an Object
MatrixTransform Creates custom transformations that are not provided by the other Transform classes. When you use a MatrixTransform, you manipulate a Matrix directly. Use a MatrixTransform to Create Custom Transforms

Windows Presentation Foundation (WPF) also provides 3D transformations. For more information, see the Transform3D class.

Перспектива

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

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

Использование значения perspective в свойстве transform прекрасно работает для преобразования одного элемента относительно единичной уникальной перспективы. Если вы желаете преобразовать группу элементов с одинаковой перспективой или точкой схода, то применяйте свойство perspective для их родительского элемента.

Приведённый ниже пример показывает несколько элементов, при трансформации которых используются отдельные перспективы в значении perspective.

HTML

CSS

Демонстрация значения perspective

В следующем примере показано несколько элементов рядом друг с другом, все преобразованы с использованием одной перспективы, добавленной с помощью свойства perspective к их прямому родительском элементу.

HTML

CSS

Глубина перспективы

В качестве значения перспективы может быть задано none или длина. Значение none отключает любую перспективу, в то время как значение длины установит глубину перспективы. Чем выше значение, тем дальше вид перспективы, создавая тем самым перспективу довольно низкой интенсивности и небольшое трёхмерное изменение. Низкое значение приближает вид перспективы, тем самым создавая перспективу высокой интенсивности и большое трёхмерное изменение.

Представьте что вы стоите в трёх метрах от трёхметрового куба и сравните его с тем же кубом, стоя в 300 метрах от него. На трёх метрах ваше расстоянии до куба такое же, что и размеры куба, поэтому сдвиг перспективы значительно больше, чем на расстоянии 300 метров, где размеры куба составляют лишь одну сотую вашего расстояния до куба. Те же самые размышления применяются к значениям глубины перспективы.

HTML

CSS

Начало перспективы

Как и в случае установки transform-origin вы можете также задать perspective-origin. Те же значения, используемые для свойства transform-origin, могут быть использованы в свойстве perspective-origin и оказывают такое же влияние на элемент. Есть большая разница между этими двумя подходами — точка трансформации определяет координаты, используемые для расчёта изменения трансформации, тогда как начало перспективы определяет координаты точки схода преобразования.

HTML

CSS

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий