• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    — Сам записывает клиентов и напоминает им о визите;
    — Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    — Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS
animation
appearance
backface-visibility
background
border
bottom
box
caption-side
clear
clip
color
column
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
grid-columns
grid-rows
hanging-punctuation
height
icon
@keyframes
left
letter-spacing
line-height
list-style
margin
max-height
max-width
min-height
min-width
nav
opacity
outline
overflow
overflow-x
overflow-y
padding
page-break
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
rotation-point
table-layout
target
text
top
transform
transition
vertical-align
visibility
width
white-space
word-spacing
word-break
word-wrap
z-index

CSS3 Свойство transform

CSS Справочник Полный CSS Справочник

Пример

Повернуть элемент div:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari и Chrome */
-o-transform:rotate(7deg); /* Opera */
}

Попробуйте сами »

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство transform не поддерживается ни одним браузером.

Internet Explorer поддерживает альтернативное свойство -ms-transform (только 2D трансформации).

Firefox поддерживает альтернативное свойство -moz-transform (только 2D трансформации).

Opera поддерживает альтернативное свойство -o-transform (только 2D трансформации).

Safari и Chrome поддерживают альтернативное свойство -webkit-transform (3D и 2D трансформации).

Определение и Использование

Свойство transform применяет 2D или 3D трансформацию к элементу. Это свойство позволяет вам вращать, масштабировать, перемещать, искажать элементы и т.д..

Значение по умолчанию: none
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.transform="rotate(7deg)"

Синтаксис

transform: none|функции-трансформации;

Значение Описание
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 трансформацию, используя матрицу 4x4 из 16 значений
translate(x,y) Определяет 2D перемещение
translate3d(x,y,z) Определяет 3D перемещение
translateX(x) Определяет перемещение, используя только значение для оси X
translateY(y) Определяет перемещение, используя только значение для оси Y
translateZ(z) Определяет 3D перемещение, используя только значение для оси Z
scale(x,y) Определяет 2D трансформацию масштабирования
scale3d(x,y,z) Определяет 3D трансформацию масштабирования
scaleX(x) Определяет трансформацию масштабирования, задавая значение для оси X
scaleY(y) Определяет трансформацию масштабирования, задавая значение для оси Y
scaleZ(z) Определяет 3D трансформацию масштабирования, задавая значение для оси Z
rotate(угол) Определяет 2D поворот, угол указывается в параметре
rotate3d(x,y,z,угол) Определяет 3D поворот
rotateX(угол) Определяет 3D поворот вдоль оси X
rotateY(угол) Определяет 3D поворот вдоль оси Y
rotateZ(угол) Определяет 3D поворот вдоль оси Z
skew(x-угол,y-угол) Определяет 2D трансформацию перекоса вдоль осей X и Y
skewX(угол) Определяет 2D трансформацию перекоса вдоль оси X
skewY(угол) Определяет 2D трансформацию перекоса вдоль оси Y
perspective(n) Определяет вид перспективы для 3D трансформированного элемента

Примеры

Попробуйте сами - Примеры

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

CSS Справочник Полный CSS Справочник



© 2011 - 2022 Уроки CSS