Главная » Языки программирования

Html webkit transform scale

На чтение 7 мин
Содержание
  1. Свойство -webkit-transform
  2. Допустимые значения
  3. Пример
  4. Заметки
  5. По теме

Свойство -webkit-transform

Свойство -webkit-transform применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).

Элемент можно передвигать, масштабировать, поворачивать и наклонять.

Допустимые значения

  • none — элемент не трансформируется
  • — элемент трансформируется согласно одной из следующих функций:
    • matrix(, , , , , ) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • matrix3d(, , , , , , , , , , , , , , , ) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • translate() — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
    • translate3d(, , ) — определяет сдвиг элемента по оси x, по оси y и по оси z
    • translateX() — определяет сдвиг элемента по оси x
    • translateY() — определяет сдвиг элемента по оси y
    • translateZ() — определяет сдвиг элемента по оси z
    • scale() — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
    • scale3d(, , ) — определяет масштаб элемента по оси x, по оси y и по оси z
    • scaleX() — определяет масштаб элемента по оси x
    • scaleY() — определяет масштаб элемента по оси y
    • scaleZ() — определяет масштаб элемента по оси z
    • rotate() — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством -webkit-transform-origin
    • rotate3d(, , , ) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством -webkit-transform-origin
    • rotateX() — определяет угол поворота элемента по оси x
    • rotateY() — определяет угол поворота элемента по оси y
    • rotateZ() — определяет угол поворота элемента по оси z
    • skew() — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
    • skewX() — определяет угол наклона элемента по оси x.
    • skewY() — определяет угол наклона элемента по оси y.
    • perspective() — расстояние в пикселях от зрителя до плоскости z = 0.
    • Safari 3.1 и выше (некоторые функции поддерживаются с Safari 4.0.3/Mac OS X и выше, и с Safari 5/Win и выше, см. заметки)
    • Chrome 1.0 и выше (некоторые функции не поддерживаются, см. заметки)

    Пример

    Заметки

    Перечень функций, которые поддерживаются Safari 4.0.3/Mac OS X и Safari 5/Win и выше и не поддерживаются Chrome: matrix3d, perspective, rotate3d, rotateX, rotateY, rotateZ, scale3d, scaleX, scaleY, scaleZ, translate3d, translateZ.

    В спецификации CSS3 есть аналогичное свойство transform.

    По теме

    • Вендорные префиксы. Что это?
    • CSS свойство -moz-transform
    • CSS свойство -o-transform
    • CSS свойство -ms-transform
    • CSS свойство transform-origin
    • CSS свойство -o-transform-origin
    • CSS свойство -moz-transform-origin
    • CSS свойство -ms-transform-origin
    • CSS свойство -webkit-transform-origin
    • CSS свойство -webkit-transform-origin-x
    • CSS свойство -webkit-transform-origin-y
    • CSS свойство -webkit-transform-origin-z
    • CSS свойство perspective
    • CSS свойство -webkit-perspective
    • CSS свойство perspective-origin
    • CSS свойство -webkit-perspective-origin
    • CSS свойство transform-style
    • CSS свойство -webkit-transform-style
    • CSS свойство backface-visibility
    • CSS свойство -webkit-backface-visibility
    • CSS свойство -webkit-animation | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-delay | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-direction | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-duration | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-fill-mode | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-iteration-count | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-name | назначение, допустимые значения, примеры
    • CSS свойство -webkit-animation-play-state | назначение, допустимые значения, примеры
    • CSS свойство -webkit-backface-visibility | назначение, допустимые значения, примеры
    • CSS свойство -webkit-background-clip
    • CSS свойство -webkit-background-composite | назначение, допустимые значения, примеры
    • CSS свойство -webkit-background-origin | назначение, допустимые значения, примеры
    • CSS свойство -webkit-background-size | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-bottom-left-radius | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-bottom-right-radius | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-horizontal-spacing | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-radius | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-top-left-radius | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-top-right-radius | назначение, допустимые значения, примеры
    • CSS свойство -webkit-border-vertical-spacing | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-break-after | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-break-before | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-break-inside | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-count | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-gap | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-rule | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-rule-color | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-rule-style | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-rule-width | назначение, допустимые значения, примеры
    • CSS свойство -webkit-column-width | назначение, допустимые значения, примеры
    • CSS свойство -webkit-columns | назначение, допустимые значения, примеры
    • CSS свойство -webkit-line-break | назначение, допустимые значения, примеры
    • CSS свойство -webkit-marquee | назначение, допустимые значения, примеры
    • CSS свойство -webkit-marquee-direction | назначение, допустимые значения, примеры
    • CSS свойство -webkit-marquee-repetition | назначение, допустимые значения, примеры
    • CSS свойство -webkit-marquee-speed | назначение, допустимые значения, примеры
    • CSS свойство -webkit-marquee-style | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-attachment | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-box-image | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-clip | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-composite | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-image
    • CSS свойство -webkit-mask-origin | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-position | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-position-x | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-position-y | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-repeat | назначение, допустимые значения, примеры
    • CSS свойство -webkit-mask-size | назначение, допустимые значения, примеры
    • CSS свойство -webkit-nbsp-mode | назначение, допустимые значения, примеры
    • CSS свойство -webkit-perspective | назначение, допустимые значения, примеры
    • CSS свойство -webkit-perspective-origin | назначение, допустимые значения, примеры
    • CSS свойство -webkit-rtl-ordering | назначение, допустимые значения, примеры
    • CSS свойство -webkit-text-fill-color | назначение, допустимые значения, примеры
    • CSS свойство -webkit-text-security | назначение, допустимые значения, примеры
    • CSS свойство -webkit-text-stroke | назначение, допустимые значения, примеры
    • CSS свойство -webkit-text-stroke-color | назначение, допустимые значения, примеры
    • CSS свойство -webkit-text-stroke-width | назначение, допустимые значения, примеры
    • CSS свойство -webkit-transform | назначение, допустимые значения, примеры
    • CSS свойство -webkit-transform-origin-x | назначение, допустимые значения, примеры
    • CSS свойство -webkit-transform-origin-y | назначение, допустимые значения, примеры
    • CSS свойство -webkit-transform-origin-z | назначение, допустимые значения, примеры
    • CSS свойство -webkit-transform-style | назначение, допустимые значения, примеры
    • CSS свойство -webkit-transition-property | назначение, допустимые значения, примеры
    • CSS свойство -webkit-user-drag | назначение, допустимые значения, примеры
    • CSS свойство -webkit-user-modify | назначение, допустимые значения, примеры
    • CSS свойство -webkit-user-select | назначение, допустимые значения, примеры
    • Ошибка 404 — Страница не найдена
    • Свойство -webkit-animation-timing-function | назначение, допустимые значения, примеры
    • Свойство -webkit-appearance | назначение, допустимые значения, примеры
    • Свойство -webkit-border-image | назначение, допустимые значения, примеры
    • Свойство -webkit-box-align | назначение, допустимые значения, примеры
    • Свойство -webkit-box-direction | назначение, допустимые значения, примеры
    • Свойство -webkit-box-flex | назначение, допустимые значения, примеры
    • Свойство -webkit-box-flex-group | назначение, допустимые значения, примеры
    • Свойство -webkit-box-lines | назначение, допустимые значения, примеры
    • Свойство -webkit-box-ordinal-group | назначение, допустимые значения, примеры
    • Свойство -webkit-box-orient | назначение, допустимые значения, примеры
    • Свойство -webkit-box-pack | назначение, допустимые значения, примеры
    • Свойство -webkit-box-reflect | назначение, допустимые значения, примеры
    • Свойство -webkit-box-shadow | назначение, допустимые значения, примеры
    • Свойство -webkit-box-sizing | назначение, допустимые значения, примеры
    • Свойство -webkit-margin-bottom-collapse | назначение, допустимые значения, примеры
    • Свойство -webkit-margin-collapse | назначение, допустимые значения, примеры
    • Свойство -webkit-margin-start | назначение, допустимые значения, примеры
    • Свойство -webkit-margin-top-collapse | назначение, допустимые значения, примеры
    • Свойство -webkit-padding-start | назначение, допустимые значения, примеры
    • Свойство -webkit-transition | назначение, допустимые значения, примеры
    • Свойство -webkit-transition-delay | назначение, допустимые значения, примеры
    • Свойство -webkit-transition-duration | назначение, допустимые значения, примеры
    • Свойство -webkit-transition-timing-function | назначение, допустимые значения, примеры

    Источник

    Читайте также:  Php определить цвет пикселя
Оцените статью
© 2023 Программирование