Научитесь использовать преобразования CSS3

CSS

Часть 1: Введение в деформацию

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

Если вы хотите повернуть фотографии, отразить элементы и т. д., вы можете сделать это с помощью функции деформации CSS.Функции деформации CSS делятся на 2D и 3D деформации.

Функции преобразования CSS включают в себя:

  • двигаться (переводить)
  • шкала (шкала)
  • вращать
  • перекос

Часть II: Система координат

Прежде чем изучать деформацию, вам нужно понять систему координат в деформации. В CSS декартова система координат представлена ​​тремя осями (как показано ниже):

  • ось x (горизонтальная ось)
  • ось Y (вертикальная ось)
  • ось z (ось глубины)

变形功能表示笛卡尔坐标系的三个轴

2D-деформация должна фокусироваться только на осях x и y.

Положительные значения оси x находятся справа, а отрицательные — слева. Положительные значения для оси Y идут вниз по продольной оси, а отрицательные значения идут вверх по продольной оси. Вспомним атрибут top позиционируемых элементов: положительные значения перемещают элемент вниз, а отрицательные значения перемещают элемент вверх.

Чтобы переместить элемент в нижний левый угол, установите для значения x отрицательное число, а для значения y положительное число:

 transform: translateX(-5em) translateY(50px);

Вышеупомянутый вариант действителен. Функция приведенного выше кода состоит в том, чтобы переместить элемент влево на 5em и вниз на 50 пикселей.

Трехмерная деформация требует внимания не только к осям x и y, но и к оси z.

Ось Z выпрыгивает из монитора и указывает прямо перед вашими глазами. Положительные значения по оси z ближе к вам, отрицательные дальше. Свойство z-index позиционированного элемента точно такое же.

На основе вышеизложенного добавьте значение оси Z:

 transform: translateX(-5em) translateY(50px) translateZ(200px);

Элемент на 200 пикселей ближе к нам, чем если бы мы не указывали значение z. Я пока не вижу эффекта, и я почувствую изменения, когда введу 3D-деформацию.

2.1 Перемещение эталонного объекта

Каждый элемент имеет свою привязку, и каждая ось перемещается относительно самой себя. Если элемент вращается, ось также поворачивается. Деформация после поворота рассчитывается относительно оси после поворота, а не оси дисплея. Как показано ниже:

Другая система координат, используемая в функциях деформации CSS, — сферическая система координат. Эта система координат используется для описания углов в трехмерном пространстве. Как показано ниже:

В 2D-деформации вам нужно только сосредоточиться на 360-градусной системе координат по окружности, то есть на экране, состоящем из осей x и осей y. Для вращения 2D-вращение на самом деле является вращением вокруг оси Z. Точно так же, если вы вращаете вокруг оси x, элемент будет смещен к нам или от нас, а если вы вращаете вокруг оси y, элемент будет вращаться в обе стороны, как показано ниже (нужно внимательно понимать) :

  • Повернуть вокруг оси X

  • Повернуть вокруг оси Y

  • Поворот вокруг оси Z

В 2D-вращении, допустим, мы хотим повернуть элемент на 45 градусов по часовой стрелке на экране монитора (то есть вокруг оси z), используемые значения деформации могут быть следующими:

transform: rotate(45deg);

Если вы измените значение на -45 градусов, элемент будет вращаться против часовой стрелки вокруг оси Z. Другими словами, элементы поворачиваются в плоскости xy. Как показано ниже:

Часть 3: Синтаксис словоизменения и соображения

Деформация на самом деле имеет только одно свойство, но есть несколько дополнительных свойств, которые управляют тем, как она деформируется.TransformИспользуйте форму ниже:

Transform
стоимость `
Первоначальный значение None
применять к Все элементы, кроме «примитивной встроенной» коробки
процент Расчет поля относительного диапазона
Рассчитано указанное значение, но значения относительной длины вычисляются как абсолютные длины
наследование нет
анимация деформация
проиллюстрировать:

  1. Extent Box: внешняя граница границы элемента. То есть при расчете ограничивающей рамки контур и поля не учитываются.

  2. Деформированные элементы имеют свой собственный контекст наложения. Масштабированные элементы могут быть меньше или больше, чем они были до преобразования, но место, занимаемое элементом на странице, остается таким же, как и до преобразования. Это верно для всех функций деформации.

  3. <transform-list> | noneПредставляет одну или несколько функций деформации, разделенных пробелами. Такие как:transform: rotate(30deg) skewX(-25deg) scaleY(2);

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

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

  6. Деформации обычно не суммируются. Если вы измените форму элемента, а затем захотите добавить деформацию, вы должны изменить исходную деформацию. Точно так же, как если вы объявляете размер шрифта в одном месте и другой размер шрифта для элемента в другом, размер шрифта не суммируется. Работает только один из размеров шрифта. За исключением анимированных деформаций, эффекты накладываются независимо от того, используются ли переходы или настоящая анимация.

  7. Преобразования еще нельзя применять к примитивным встроенным блокам. Примитивное встроенное поле относится кspan, гиперссылки и т. д. встроенные блоки. Эти элементы можно деформировать с помощью родительского элемента на уровне блока, но нельзя вращать напрямую. если вы не измените их отображение наdisplay:block，display:inline-blockЖдать.

transform: translateX(200px) rotate(45deg);
transform: rotate(45deg) translateX(200px);

不同顺序，不同结果

div {transform: translateX(100px) scale(1.2)};
div:hover {transform:rotate(-45deg)};

Даже без явного использования переходов или анимации псевдоклассы взаимодействия с пользователем, такие как:hover) для достижения деформации суперпозиции. Это связано с тем, что такой эффект, как наведение, является переходом, он просто не запускается свойством перехода. Следовательно, вы можете объявить свойства деформации, как указано выше, для наложения эффектов.

Функция деформации

В настоящее время существует 21 функция деформации. Различные функции деформации используют значения в разных форматах для достижения соответствующих деформаций.

  1. translate()
  2. translate3d()
  3. translateX()
  4. translateY()
  5. translateZ()
  6. scale()
  7. scale3d()
  8. scaleX()
  9. scaleY()
  10. scaleZ()
  11. rotate()
  12. rotate3d()
  13. rotateX()
  14. rotateY()
  15. rotateZ()
  16. skew()
  17. skewX()
  18. skewY()
  19. matrix()
  20. matrix3d()
  21. perspective()

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

Часть 4: Функция переводаtranslate()

Функция перевода перемещается по одной или нескольким осям.

  • translateX()Перемещает элемент вдоль собственной оси x.
  • translateY()Перемещение элементов по оси Y элемента.
  • translateZ()Перемещает элемент вдоль собственной оси Z.
функция Возможное значение
translateX()，translateY() `
translateZ() <length>
translate() `[
translate3d() `[
4.1 translateX()，translateY()

translateX()，translateY()Эти две функции часто называют «двумерными» функциями перевода, потому что они могут перемещать элементы вверх и вниз, а также перемещать элементы влево и вправо. Но вы не можете перемещать элемент вперед и назад по оси Z. Значение обеих функций является значением расстояния, которое может быть длиной или процентом.

translateX(200px)  <!--元素向右移动200像素-->
translateY(200px)  <!--元素向下移动200像素-->

Если значение указано в процентах, расстояние перемещения рассчитывается относительно размера самого элемента.

translateX(50%)  <!--元素向右移动自身尺寸的一半-->
4.2 translate()

Если вы хотите перемещаться по обеим осям x и y, используйтеtranslate()более удобный. Первое значение представляет ось x, а второе значение представляет ось y.translate()а такжеtranslateX()，translateY()Комбинированный эффект тот же.

translate(2em)равныйtranslate(2em,0)равныйtranslateX(2em).

平移例子

4.3 translateZ()

translateZ()Переместите элемент по оси Z, т.е. переместите элемент в третьем измерении.translateZ()Принимаются только значения длины. На самом деле любое значение, связанное с осью Z, не может использовать процент.

4.4 translate3d()

translate3d()Это сокращенное свойство может одновременно указывать величину перемещения по осям X, Y и Z. Процесс 3D-трансляции выглядит следующим образом:

3D平移过程Стрелки на рисунке представляют движение вдоль соответствующей оси, в конечном итоге достигая точки в трехмерном пространстве. а такжеtranslate()отличается, еслиtranslate3d()менее 3 значений, нет предполагаемого значения по умолчанию. Так что-то вродеtranslate3d(1em,-50px)операция недействительна и не может считатьсяtranslate3d(1em,-50px,0).

Часть 5: Функции масштабированияscale()

Преобразования масштаба могут сделать элементы больше или меньше. Все значения функции масштабирования представляют собой безразмерные действительные числа и всегда положительны. В 2D-плоскости масштабирование может выполняться по оси x или оси y отдельно или по обеим осям одновременно.

функция Возможное значение
scaleX()，scaleY()，scaleZ() <number>
scale() <number>[,<number>]?
scale3d() <number>,<number>,<number>

Число, переданное функции масштабирования, является множителем, поэтомуscaleX(2)удвоит ширину элемента, как до преобразования, аscaleY(0.5)уменьшит высоту элемента вдвое. Если вы хотите масштабировать по обеим осям одновременно, используйтеscale(). Первое значение — это значение x, а второе — значение y. следовательноscale(2,0.5)Удвоит ширину элемента и уменьшит высоту элемента вдвое. Если указано только одно значение, оно будет использоваться как значение масштабирования для обеих осей. следовательно,scale(2)Удвоит ширину и высоту элемента. Это то же самое, чтоtranslate()отличается, вtranslate(), пропущенное второе значение всегда устанавливается равным 0. На изображении ниже показано использованиеscale()пример:

5.1 Масштабирование трехмерного пространства

Вы можете масштабировать двухмерное пространство, а можете масштабировать трехмерное пространство. предоставлено cssscalez()Функция масштабируется только по оси Z, аscale3d()Вы можете масштабировать по всем трем осям одновременно. Конечно, эти две функции действуют только в том случае, если элемент имеет глубину, которая по умолчанию не имеет глубины. Если вы позволяете элементу иметь определенную глубину, например вращение вокруг оси x или оси y, то глубину можно масштабировать. использоватьscalez()илиscale3d()Все будет хорошо.

а такжеtranslate()Такой же,scale3d()Все три числа должны быть действительными. В противном случае все значение деформации, которому оно принадлежит, будет аннулировано.

Часть 6: Функция вращенияrotate()

Функция вращения вращает элементы вокруг оси вращения или вокруг вектора в трехмерном пространстве. Есть четыре простые функции для деформации вращения и еще одна сложная функция, предназначенная для трехмерного вращения.

функция Возможное значение
rotate()，rotateX()，rotateY()，rotateZ() <angle>

Четыре простые функции принимают только одно значение: угол. Угол выражается числом (положительным или отрицательным) и допустимой единицей измерения угла (градус, град, рад и поворот). Если число выходит за пределы нормального диапазона для соответствующей единицы измерения, оно будет округлено до значения в пределах диапазона. То есть 437 градусов и 77 градусов имеют одинаковый эффект, и -283 градуса имеют такой же эффект.

Но такие преобразования эквивалентны только в том случае, если нет никакой анимации. Если вы анимируете поворот на -20 градусов, элемент слегка наклоняется влево, не поворачиваясь. Если вы анимируете поворот на 340 градусов, элемент повернется почти на полный оборот вправо. Конечное состояние двух анимаций одинаково, но процесс каждого вращения отличается.

rotate()Функция реализует 2D-вращение, которое является наиболее часто используемым методом вращения. Его эффект эквивалентенrotateZ(), потому что все они вращаются вокруг оси z (снимая с дисплея, указывая прямо на ваши глаза). похожий,rotateX()Вращайте вокруг оси x так, чтобы элемент был наклонен к вам или от вас.rotateY()Вращает элемент вокруг оси Y, как дверь открывается и закрывается. Эффект, как показано ниже:

Некоторые из примеров на изображении выше включают 3D-эффекты. со следующими главамиtransform-styleа такжеperspectiveЭффект, который может быть достигнут сочетанием атрибутов. Это справедливо для всех трехмерных деформаций, описанных в этой статье. Если вы примените только упомянутую сейчас функцию деформации, вы не получите эффекта, показанного на рисунке.

6.1 rotate3d()
функция Возможное значение
rotate3d() <number>,<number>,<number>,<angle>

если ты понимаешьвектор, вектор можно понимать как стрелку в координатном пространстве. На следующих рисунках представлены векторы 2-мерных координат и 3-мерных координат соответственно:

2维坐标的向量

3D坐标的向量

Чтобы повернуть элемент в 3D-пространстве, используйтеrotate3d(). Первые три значения задают компоненты вектора x, y и z в трехмерном пространстве, а четвертое значение — это значение угла, определяющее величину поворота вокруг вектора.

См. простой пример:rotate(45deg)В 3D вращение означает даrotate3d(0,0,1,45deg). Размер вектора осей x и y равно 0, размер Z-оси составляет 1. То есть, центр вращения Z-оси. Элемент повернул 45 градусов около указанного вектора. Ниже (включая вращение о оси X и оси Y должно составлять 45 градусов для обеспеченияrotate3d()значение функции):

На фото вышеrotate(45deg)В трехмерном пространстве это эквивалентноrotate3d(0,0,1,45deg). Первые три числа задают три компонента вектора, величина которого равна 0 по осям x и y. Размер по оси Z равен 1. Следовательно, этот вектор находится на оси z и указывает в положительном направлении, т.е. к зрителю. Если вы посмотрите на начало вектора, элементы повернуты по часовой стрелке.

похожий,rotateX(45deg)Эквивалентноrotate3d(1,0,0,45deg). Этот вектор находится на оси x и указывает в положительном направлении (справа). Если вы стоите в конце вектора и смотрите в начало координат, элемент поворачивается на 45 градусов по часовой стрелке вокруг вектора, поэтому, стоя в обычном положении наблюдателя, верхняя часть элемента находится вдали от наблюдателя, а нижняя часть элемента находится ближе к наблюдателю.

Предположим, что функция вращенияrotate3d(-0.95,0.5,1,45deg)вектор описания. Предполагая, что куб имеет длину стороны 200 пикселей, этот вектор имеет размер 190 пикселей по оси x и указывает влево. Размер по оси Y составляет 100 пикселей, направленных вниз. Размер по оси Z составляет 200 пикселей, указывая на зрителя. Этот вектор указывает от начала координат (0,0,0) до (-190px, 100px, 200px). Как показано ниже:

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

rotate3d(1,1,0,45deg)а такжеrotateX(45deg) rotateY(45deg) rotateZ(0deg)Не эквивалентно.

Часть 7: Функция наклонаskew()

функция Возможное значение
skewX(),skewY() <angle>
skew() <angle>,[,<angle>]?

Функция наклона наклоняет элемент вдоль оси x или y. Элементы нельзя наклонять по оси Z или вектору в трехмерном пространстве.

skewX(),skewY()Наклоните элемент на указанный угол. Как показано ниже:

skew(a,b)Эффект заключается в реализации 2D-перекоса через матричные операции. На рисунке ниже показано несколько примеров перекоса матрицы.

Часть 8: Функция обзораperspective()

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

функция Возможное значение
perspective() <length>

Установите меньшие значения для более экстремальных углов обзора и большие значения для более мягких углов обзора. Как показано ниже:

Значения окна просмотра менее 300 пикселей дают особенно искаженный эффект, значения больше 2000 пикселей производят «очень легкое» искажение, а значения от 500 до 1000 пикселей создают «умеренное окно просмотра». На рисунке ниже показаны результаты, полученные при разных значениях видимости для одного и того же угла поворота.

Значение видимости должно быть положительным и не может быть равным нулю. любое другое значение приведет кperspective()функция игнорируется.perspective()Позиция функции в списке функций деформатора важна. Если вы хотите установить значение видимости в списке функций деформации, обязательно установитеperspective()Функция стоит на первом месте, если она предшествует деформации области просмотра.

Важно: важен порядок, в котором записываются функции преобразования.perspective()функция и описана позжеperspectiveСвойства очень похожи, но их использование совершенно различно. В общем, лучше всего использоватьperspectiveсвойства, но также необходимо использоватьperspective()Исключения для функций.

Часть IX: Изменение зоны обзора

На самом деле область видимости определяется двумя свойствами: одна определяет расстояние свойства области видимости, что эквивалентно рассмотренному ранееperspective()функция. Другой определяет происхождение области видимости.

9.1: Определение зоны обзораperspectiveАтрибуты

perspectiveЗначением свойства является длина, определяющая глубину усеченного обзора. Таким образом, это согласуется с ранее рассмотреннымperspective()Функции похожи, но между ними есть важные различия.

perspective
стоимость `none
Первоначальный значение none
применять к любой деформируемый элемент
Рассчитано абсолютная длина или нет
наследование нет
анимация да

Если вы хотите создать особенно глубокое поле зрения, имитирующее эффект зум-объектива, вы можете объявитьperspective: 2500px. Если вы хотите сделать глубину меньше, вы можете объявитьperspective: 200px.

9.2:perspectiveатрибут сperspective()разница функций

  • perspective()Функция определяет только область просмотра для целевого элемента, такого как объявлениеperspective(800px) rotateY(45deg). Тогда только элементы, к которым применяется это правило, могут использовать установленную область просмотра.

  • а такжеperspectiveГлубина видимости, определяемая атрибутом, применяется ко всем дочерним элементам целевого элемента.

Это важное различие между ними.perspectiveТрехмерное пространство, созданное атрибутом, является общим для всех дочерних элементов, в то время какperspective()Функция влияет только на целевой элемент, и ее следует размещать в начале или перед списком функций деформации.В большинстве случаев ее следует использоватьperspectiveАтрибуты.

9.3: Перемещение начала зоны обзораperspective-originАтрибуты
perspective-origin
стоимость ` [left
Первоначальный значение 50% 50%
применять к любой деформируемый элемент
процент Расчет поля относительного диапазона
Рассчитано Рассчитывается в процентах. Когда значение представляет собой значение длины, оно рассчитывается как абсолютная длина.
наследование нет
анимация <percentage>,<length>

perspective-originОпределяет, где сходится линия обзора.

На рисунке ниже показаны «линейки» в разных источниках области просмотра (предпосылка о допустимости источника области просмотра должна быть объявленаperspectiveАтрибуты):

Часть 10: Матричная функцияmatrix()

matrix()
стоимость <number>[,<number>]{5,5}

Пара спецификаций деформации cssmatrix()Функция строго задана: матрица преобразования задана 6 значениями a-f для задания деформации в 2D-плоскости.

matrix()Допустимые значения для функции — 6 чисел, разделенных запятыми. Не больше, не меньше. Числа могут быть положительными или отрицательными.matrix()Синтаксис, используемый для значения функции, очень сложный, он описывает конечное состояние элемента после деформации и может охватывать все другие типы деформации (поворот, наклон и т. д.). Наконец, очень немногие люди используют этот синтаксис.

10.1 Функции трехмерной матрицы деформации
matrix3d()
стоимость <number>[,<number>]{15,15}

Пара спецификаций деформации cssmatrix3d()Функция устанавливает строгие правила: упорядочивайте однородную матрицу 4X4 в порядке столбцов и используйте эти 16 значений для задания 3D-деформации.matrix3d()Значение функции должно состоять из 16 чисел через запятую, не больше и не меньше. Числа располагаются столбцами в матрицу 4x4, где первый столбец состоит из первого набора из четырех чисел, второй столбец состоит из второго набора из четырех чисел и так далее.

В этой главе представлено лишь краткое введение в матричные функции.

Часть 11: Перемещение начала координатtransform-origin

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

transform-origin
стоимость ` [left
Первоначальный значение 50% 50%
применять к любой деформируемый элемент
процент Расчет поля относительного диапазона
Рассчитано Рассчитывается в процентах. Когда значение представляет собой значение длины, оно рассчитывается как абсолютная длина.
наследование нет
анимация <percentage>,<length>

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

Горизонтальная и вертикальная оси могут использовать английские ключевые слова, проценты и длины. И ось Z не может использовать английские ключевые слова или проценты. Однако можно использовать значение длины. Пиксельные значения в настоящее время используются чаще всего.

长度值设定的是距元素左上角的距离。 так,transform-origin: 5em 22pxОпределенное начало деформации находится в 5em от левой стороны элемента и в 22px от верхнего края элемента.

Проценты рассчитываются относительно размеров соответствующих осей и элементов. Устанавливает смещение от верхнего левого угла элемента. Такие как:transform-origin: 67% 40%Элемент определяется как 67% ширины от левой стороны элемента и 40% высоты от верхнего края элемента. Как показано ниже:

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

Источник деформации также влияет на другие типы деформации, такие как перекос и масштаб. Как показано ниже:

Есть одна деформация, которая менее подвержена влиянию источника деформации - поступательная. использоватьtranslate()Перемещение элемента, независимо от того, где деформация элемента происходит, элемент заканчивается в то же самое положение.

Часть 12: Методы деформацииtransform-style

Если вы измените форму элемента в трехмерном пространстве, например, с помощьюtranslate3d(), возможно, желая визуализировать элементы в 3D-пространстве. Однако это не поведение по умолчанию. По умолчанию результат плоский независимо от того, как он деформирован. Но вы можете использоватьtransform-styleИсправлять.

transform-style
стоимость `flat
Первоначальный значение flat
применять к любой деформируемый элемент
Рассчитано указанное значение
наследование нет
анимация нет

Предположим, мы хотим переместить элемент в умеренный вьюпорт. Используйте следующий css:

.inner {  
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

Результат выглядит следующим образом:

Однако, если внешний div повернуть в одну сторону, результат будет не таким, как мы ожидали: внутренний div выглядит как фотография, приклеенная к внешнему div, что не так, как ожидалось. потому чтоtransform-styleЗначение по умолчанию — плоское. Верхняя часть внутреннего div наклоняется вперед, а нижняя часть откидывается назад, как изображение, которое прилипает к внешнему div и вращается вместе с внешним слоем.


.outer {  
    transform: perspective(750px) translateY(60px) rotateX(-20deg); 
}

.inner {  
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

Результат выглядит следующим образом:

Однако изменение значения наpreserve-3dПосле этого результаты были совсем другими. Внутренний div рисуется как трехмерный объект, который плавает рядом с внешним div, поэтому он не прилипает к внешнему div.


.outer {  
    transform: perspective(750px) translateY(60px) rotateX(-20deg); 
    transform-style: perserve-3d;
}

.inner {  
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

Результат после модификации следующий:

Уведомление

transform-styleЗаданный метод деформации может быть переопределен другими свойствами. Это связано с тем, что некоторые значения этих свойств требуют, чтобы элемент и его дочерние элементы были плоскими для функционирования. В этом случае, несмотря ни на чтоtransform-styleКакое бы значение не было установлено, оно будет принудительно сброшено наflat.

Чтобы избежать перезаписи, следующие свойства устанавливаются в заданные значения (это также значения по умолчанию для свойств):

  • overflow: visible
  • filter: none
  • clip: auto
  • clip-path: none
  • mask-image: none
  • mask-border-source: none
  • mix-blend-mode: normal

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

Часть XIII: обработка задней поверхностиbackface-visibility

При трехмерной деформацииbackface-visibilityАтрибуты могут видеть обратную сторону элемента.

backface-visibility
стоимость `visible
Первоначальный значение visible
применять к любой деформируемый элемент
Рассчитано указанное значение
наследование нет
анимация нет

backface-visibilityСвойство решает, отображать ли обратную сторону, когда задняя сторона элемента обращена к нам, и все.

Предполагая переворачивание двух элементов, один элементbackface-visibilityсвойство установлено наvisible, другой настроен наhidden.

Демонстрация простого эффекта переворачивания картыbackface-visibilityиспользование:

.card {
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  width:200px;
  height:280px;
  transition: all .6s;
  border: 1px solid #000;
  border-radius: 4px;
}

.card:hover {
  transform: rotateY(180deg);
}
img {
  position: absolute;
  width:100%;
  height: 100%;
  transition: all .5s;
  backface-visibility: hidden;
}
/*由于我们将两个图像都藏在了背面，所以另一面没有任何东西。 所以接下来需要再把.front-face翻转180度*/
.back-face {
  transform: rotateY(180deg);
}

<div class="card">
    <img class="front-face" src="1.jpg">
    <img class="back-face" src="2.jpg">
</div>

Ссылка на ссылку

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

Полное руководство по CSS (4-е издание)

Понимание преобразования CSS3 из взаимосвязи между матрицами и пространственными операциями

CSS 3D вращение rotate3d и translate3d

вооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

Meyer Web.GitHub.IO/CSS включает g4figs…

HTMLdog.com/references/…

Категории