Css transform scale scroll

Свойство transform

Свойство CSS transform позволяет визуально преобразовать элемент в двухмерном или трехмерном пространстве. С помощью преобразования элементы могут быть перемещены, повернуты и масштабированы в двух или трехмерном пространстве.

Если точнее, свойство transform преобразует систему координат элемента, что приводит к трансформации элемента в пространстве. Оно принимает в качестве значения список функций преобразования ( приведены ниже ) или значение none . Система координат элемента преобразуется в конечное значение, которое получается путем запуска каждой функции в соответствующую ей матрицу , а затем умножения этих матриц.

Любое значение свойства transform , отличное от none, в результате дает как стековый контекст, так и содержащий блок. Это означает, что преобразуемый элемент действует как контейнер для позиционируемых фиксировано дочерних элементов.

Матрица преобразования также зависит от значения свойства transform-origin , которое используется для указания исходного положения преобразования.

Система координат

Каждый элемент в CSS имеет систему координат, начало которой размещается в левом верхнем углу элемента.

При применении CSS transform начало системы координат переносится в центр элемента. Это происходит потому, что значение свойства transform-origin , применяемое по умолчанию, равно 50%50. После этого все преобразования применяются к элементу на основании нового положения системы координат.

Исходная система координат и система координат при применении transform со значением свойства transform-origin, применяемым по умолчанию

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

Если с помощью свойства transform вы вращаете или наклоняете элемент, то же самое происходит с системой координат, и все последующие преобразования будут применяться на основе новой системы координат. Поэтому порядок преобразований имеет значение, разные последовательности приведут к различным преобразованиям. Это имеет смысл, потому что преобразования переводятся в матрицы, а умножение двух матриц в математике дает разные результаты в зависимости от порядка этих матриц. Например, а х b не дает тот же результат, что b х а ( если ни одна из них не является единичной ).

Если нужно переместить элемент с помощью CSS text transform в другое положение и повернуть его в новом положении, вы должны сделать это в указанном порядке: переместить, а затем повернуть. Если вы повернете элемент, то повернется его система координат, и перемещение в определенном направлении не приведет к ожидаемому результату.

Если вы повернете элемент на 90 градусов вокруг оси у, например, то его ось х будет указывать вглубь экрана, в противоположном от вас направлении. Таким образом, если после этого вы примените перемещение вдоль оси х , элемент не будет перемещаться вправо, он будет удаляться от вас. Поэтому при преобразованиях важно обращать внимание на порядок, в котором указаны функции свойства transform . Первая функция будет применяться первой, а последняя будет применена последней.

Примечания

Преобразования, применяемые к элементу, влияют на его визуальное отображение, но не влияют ни на один аспект CSS кроме свойства overflow . Пространство, которое занимал элемент до преобразования, он будет занимать после преобразования, а само преобразование не будет влиять на структуру других элементов вокруг него. Свойство CSStransform не влияет на поток контента, в котором размещается преобразованный элемент. В то же время, область заполнения учитывается при преобразовании.

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

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

Когда элемент преобразуется, значение fixed для свойства background-attachment рассматривается, как значение scroll . Вычисленное значение background-attachment не претерпевает изменений.

Кроме transform-origin при преобразовании могут использоваться свойства perspective и perspective-origin , чтобы задать для сцены глубину, а свойство transform-style — чтобы сохранить определение трехмерного пространства. Это полезно при выполнении вложенных CSS-преобразований . Все эти свойства используются в сочетании друг с другом для создания CSS-преобразования в двух или трех измерениях.

Официальный синтаксис

• Исходное значение: none
• Применяется к: трансформируемому элементу
• Анимируемо: да

Примечания

— это список из функций преобразования.

Значения

Можно применить к элементу преобразование, используя одно из следующих значений свойства transform :

• CSS transform rotate ()
• translateX()
• translateY()
• scale()
• scaleX()
• scaleY()
• rotate()
• skew()
• skewX
• skewY
• matrix()
• translateZ
• translate3d()
• scaleZ()
• scale3d()
• rotateX()
• rotateY()
• rotateZ()
• rotate3d()
• matrix3d()
• perspective()

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

Функции 2D-преобразований:

translate()

transform: translate( tx [, ty ]? ); /* Знак вопроса указывает второе значение, которое является необязательным * /

Функция CSS transform translate используется для перемещения элемента по вектору [tx, ty] , где tx — смещение по оси х , а ty — смещение по оси у . Если ty не указано, то его значение считается равным нулю, а элемент перемещается только вдоль оси х . Если единицы измерения не указаны, число будет рассматриваться как » пользовательские единицы «.

Положительное значение смещения перемещает элемент в направлении оси, а отрицательное значение — в направлении, противоположном направлению оси.

transform: translate(100px); /* перемещает элемент на 100 пикселей по оси x */ transform: translate(-100px); /* перемещает элемент на 100 пикселей по оси x */ transform: translate(50px, 300px); /* перемещает элемент на 50 пикселей вправо и на 300 пикселей вниз */ transform: translate(50%, 10%); /* перемещает элемент на 50% его ширины влево, и на 10% его высоты вниз */ transform: translate(-100%); /* перемещает элемент на -100% влево */ transform: translate(100px, 100px); /* результат приведен на рисунке ниже */

Результат применения к элементу смещения:

Результат применения к элементу преобразования translate(100px, 100px). Обратите внимание на преобразованную позицию начала координат.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

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

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

Scroll not working with CSS Transform Scale on Firefox #34

Scroll not working with CSS Transform Scale on Firefox #34

Comments

I have a DIV that’s scaled back to about 0.65. In doing so, custom scroll won’t work. It simply doesn’t scroll at all. The issue is very similar to this user’s problem on SO (diff plug-in), however for me the scroll bar just flickers and doesn’t do anything.

Any ideas? Love your script, but may have to switch if this can’t be fixed.

The text was updated successfully, but these errors were encountered:

I also encountered the same problem. The problem is that when applying the «Scale» function $.width() always returns the original value, but $ .position() returns depending on the scale.

I don’t have time to address this currently. Perhaps this workaround could work: try applying a scrollbar to an outer container and scale transform to an inner container. Let me know if this works.

Does not work. No luck on the container. Worse then the current state.

Footer

You can’t perform that action at this time.

Источник

transform

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Try it

If the property has a value different than none , a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.

Warning: Only transformable elements can be transform ed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Syntax

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: revert-layer; transform: unset; 

The transform property may be specified as either the keyword value none or as one or more values.

If perspective() is one of multiple function values, it must be listed first.

Values

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

Specifies that no transform should be applied.

Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Formal definition

Initial value	none
Applies to	transformable elements
Inherited	no
Percentages	refer to the size of bounding box
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a transform
Creates stacking context	yes

Источник