Нонче тут

Сейчас 18 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Свойство 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(<угол>) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin
    • rotate3d(<число>, <число>, <число>, <угол>) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством transform-origin
    • rotateX(<число>) — определяет угол поворота элемента по оси x
    • rotateY(<число>) — определяет угол поворота элемента по оси y
    • rotateZ(<число>) — определяет угол поворота элемента по оси z
    • skew(<угол>) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
    • skewX(<угол>) — определяет угол наклона элемента по оси x.
    • skewY(<угол>) — определяет угол наклона элемента по оси y.
    • perspective(<глубина>) — расстояние в пикселях от зрителя до плоскости z = 0.

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


IE

Opera

Chrome

Firefox

Safari
Internet Explorer 10
9
-ms-
Opera 12 и выше
10.5
-o-
Chrome 4 и выше
2
-webkit-
Firefox 16 и выше
3.5
-moz-
Safari 4 и выше
3.1
-webkit-

Свойство transform-origin — задает координаты центра трансформации.

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

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

  • <значение> — абсолютное значение расстояния от левого верхнего угла элемента в плоскости z=0 до координат центра трансформации. Координату z можно задать только абсолютной величиной
  • <процент> — расстояние от левого верхнего угла элемента до координаты центра трансформации в процентах от размера элемента (координата по оси x вычисляется в процентах от ширины элемента, а координата по оси y — от высоты)
  • left — координата по оси x равна 0 (трансформация по оси x происходит относительно левой стороны элемента)
  • right— координата по оси x равна 100% или ширине элемента (трансформация по оси x происходит относительно правой стороны элемента)
  • top— координата по оси y равна 0 (трансформация по оси y происходит относительно верхней стороны элемента)
  • bottom — координата по оси y равна 100% (трансформация по оси y происходит относительно нижней стороны элемента)
  • center — координата по оси x равна 50% (трансформация по оси x происходит относительно центра элемента). Если перед этим значением идет значение left или right, задает координату по оси y равную 50%. Если после этого значения идет значение top или bottom, задает координату по оси x равную 50%. Если эти константы отсутствуют, задает значение равное 50% по обеим осям

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


IE

Opera

Chrome

Firefox

Safari
Internet Explorer 10
9
-ms-
Opera 12 и выше
10.5
-o-
Chrome 4 и выше
2
-webkit-
Firefox 16 и выше
3.5
-moz-
Safari 4 и выше
3.1
-webkit-
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.