transform — CSS | MDN

CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Если свойство имеет значение, отличное от  none, будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

transform: none;


transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
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.0, 3.0, 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);


transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);


transform: inherit;
transform: initial;
transform: unset;
 

Свойство transform может быть указано как значение ключевого слова none

или как одно или более значений <transform-function>.

Значения

<transform-function>

Одна или более применяемых функций CSS-трансформации. Функции трансформации  умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.

none

Указывает, что трансформация не должна применяться.

Формальный синтаксис

none | <transform-list>
где 
<transform-list> = <transform-function>+
где 
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
 
где 
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
 <scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
 <scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )
где 
<length-percentage> = <length> | <percentage>

Если perspective() (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
} 

Результат

Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.

Кроме того, рассмотрите возможность использования @media-опции prefers-reduced-motion — используйте ее для написания медиа-запроса, который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.

Узнать больше:

BCD tables only load in the browser

CSS — Префиксы браузеров — ИТ Шеф

В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.

Что такое префиксы

Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit-, -moz-, -ms- и др.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

• -webkit-: браузеры Chrome, Safari, Opera;
• -moz-: браузер Mozilla Firefox;
• -ms-: браузер Internet Explorer.

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

Причины появления префиксов

Причин для появления префиксов было достаточно много:

• Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
• Для решения проблем с кроссбраузерностью.
• Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.

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

Как использовать префиксы

Рассмотрим в качестве примере следующий код:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.

На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing.

Как проверить поддержку определенного свойства в браузере

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

Сайт «Can I Use…»

Например: проверим, как реализовано свойство transform в браузерах.

На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

• Красный прямоугольник — браузер, в котором данное свойство не реализовано;
• Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
• Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
• Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

Исх. №: от ..

Отчет о величине вознаграждения маркет-мейкера

за период с .. по ..

дата формирования отчета: ..

Участник торгов:    
Идентификатор Участника торгов: 

Договор № от ..
Торгово клиринговый счет:   Код клиента:

Обязательства исполнены: ДА НЕТ
Количество успешных дней выполнения обязательств:

Дата	Обязательства исполнены	Выполнено бумаг	Учтенный объем
	ДА НЕТ
ИТОГО:

Размер вознаграждения участника:
Преобразование

— CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Если свойство имеет значение, отличное от none , будет создан контекст наложения.В этом случае элемент будет действовать как содержащий блок для любой позиции : fixed; Позиция или : абсолютная; элементов, которые он содержит.

 
преобразовать: нет;


преобразование: матрица (1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
преобразовать: matrix3d ​​(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
трансформация: перспектива (17 пикселей);
преобразовать: повернуть (0,5 оборота);
преобразовать: rotate3d (1, 2.0, 3.0, 10deg);
преобразовать: rotateX (10deg);
преобразовать: rotateY (10deg);
преобразовать: rotateZ (10deg);
преобразовать: перевести (12 пикселей, 50%);
преобразовать: translate3d (12px, 50%, 3em);
преобразовать: translateX (2em);
преобразовать: translateY (3 дюйма);
преобразовать: translateZ (2px);
преобразовать: масштаб (2, 0.5);
преобразовать: scale3d (2,5, 1,2, 0,3);
преобразовать: scaleX (2);
преобразовать: scaleY (0,5);
преобразовать: scaleZ (0,3);
преобразование: наклон (30 градусов, 20 градусов);
преобразовать: skewX (30deg);
преобразовать: skewY (1,07рад);


преобразовать: translateX (10px) rotate (10deg) translateY (5px);
преобразование: перспектива (500 пикселей) перевод (10 пикселей, 0, 20 пикселей) rotateY (3 градуса);


преобразовать: наследовать;
преобразовать: начальный;
преобразовать: не задано;
  

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

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

Значения

<функция-преобразование>

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

нет

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

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

Кроме того, рассмотрите возможность использования мультимедийной функции prefers -formed-motion — используйте ее для написания мультимедийного запроса, который отключит анимацию, если пользователь уменьшил анимацию, указанную в его системных настройках.

Подробнее:

  нет | <список-преобразований>, где <список-преобразований> = <функция-преобразования> +, где <функция-преобразования> = <матрица ()> |  |  |  | <масштаб ()> |  |  | <поворот ()> | <перекос ()> |  |  |  |  |  |  |  |  |  |  |  | <перспектива ()> где  = matrix ( # {6})  = translate (, ?)  = translateX ()  = translateY ()  = scale (, ?)  = scaleX ()  = scaleY ()  = rotate ([ | ])  = skew ([ | ], [< угол> | <ноль>]?)  = skewX ([<угол> | <ноль>])  = skewY ([<угол> | <ноль>])  = matrix3d ​​(<число> # {16})  = translate3d (, , )  = translateZ ()  = scale3d (, , )  = scaleZ ()  = rotate3d (, , , [ <угол> | <ноль>])  = rotateX ([<угол> | <ноль>])  = rotateY ([<угол> | <ноль>])  = rotateZ ([<угол> | <ноль>]) <перспектива ()> = перспектива (<длина>), где <длина-процент> = <длина> | <процент>  

Перевод и поворот элемента

HTML

  
 Преобразованный элемент 
  

CSS

  div {
  граница: сплошной красный;
  преобразовать: перевести (30 пикселей, 20 пикселей) повернуть (20 градусов);
  ширина: 140 пикселей;
  высота: 60 ​​пикселей;
}  

Результат

Дополнительные примеры

Таблицы BCD загружаются только в браузере

Использование преобразований CSS — CSS: каскадные таблицы стилей

Изменяя координатное пространство, CSS преобразует , изменяя форму и положение затронутого содержимого, не нарушая нормального документооборота.Это руководство представляет собой введение в использование преобразований.

преобразований CSS реализованы с использованием набора свойств CSS, которые позволяют применять аффинные линейные преобразования к элементам HTML. Эти преобразования включают вращение, наклон, масштабирование и перемещение как в плоскости, так и в трехмерном пространстве.

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

Первым устанавливаемым элементом является перспектива . Перспектива — вот что дает нам трехмерное впечатление. Чем дальше от зрителя находятся элементы, тем они меньше.

Установка перспективы

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

HTML

HTML-код ниже создает четыре копии одного и того же блока с разными значениями перспективы.

  <таблица>
  
    
        перспектива: 250 пикселей; 
      
        перспектива: 350 пикселей; 
      
    
    
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
    
    
        перспектива: 500 пикселей; 
      
        перспектива: 650 пикселей; 
      
    
    
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
    
  

  

CSS

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

 
.pers250 {
  перспектива: 250 пикселей;
}

.pers350 {
  перспектива: 350 пикселей;
}

.pers500 {
  перспектива: 500 пикселей;
}

.pers650 {
  перспектива: 650 пикселей;
}


.container {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  margin: 75px 0 0 75px;
  граница: нет;
}

.cube {
  ширина: 100%;
  высота: 100%;
  обратная видимость: видимая;
  перспективное происхождение: 150% 150%;
  стиль преобразования: сохранить-3d;
}

.лицо {
  дисплей: блок;
  позиция: абсолютная;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: нет;
  высота строки: 100 пикселей;
  семейство шрифтов: без засечек;
  размер шрифта: 60 ​​пикселей;
  цвет белый;
  выравнивание текста: центр;
}


.передний {
  фон: rgba (0, 0, 0, 0.3);
  преобразовать: translateZ (50 пикселей);
}

.назад {
  фон: rgba (0, 255, 0, 1);
  черный цвет;
  преобразовать: rotateY (180deg) translateZ (50px);
}

.верно {
  фон: rgba (196, 0, 0, 0,7);
  преобразовать: rotateY (90deg) translateZ (50px);
}

.оставили {
  фон: rgba (0, 0, 196, 0,7);
  преобразовать: rotateY (-90deg) translateZ (50px);
}

.верх {
  фон: rgba (196, 196, 0, 0,7);
  преобразовать: rotateX (90deg) translateZ (50px);
}

.Нижний {
  фон: rgba (196, 0, 196, 0.7);
  преобразовать: rotateX (-90deg) translateZ (50px);
}


th, p, td {
  цвет фона: #EEEEEE;
  отступ: 10 пикселей;
  семейство шрифтов: без засечек;
  выравнивание текста: слева;
}  

Результат

Второй настраиваемый элемент — это позиция зрителя со свойством перспективного происхождения . По умолчанию перспектива сосредоточена на зрителе, что не всегда адекватно.

Изменение исходной точки перспективы

В этом примере показаны кубы с популярными значениями исходной точки перспективы .

HTML

  <раздел>

<рисунок>
  
    

     

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
     
    


<рисунок>
  
   

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  


<рисунок>
  
  

    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
    
  



  

CSS

 
.potl {
  перспектива происхождения: вверху слева;
}
.potm {
  перспектива-происхождение: верх;
}
.potr {
  перспектива происхождения: вверху справа;
}
.poml {
  перспектива происхождения: слева;
}
.pomm {
  перспективное происхождение: 50% 50%;
}
.pomr {
  перспектива-происхождение: право;
}
.pobl {
  перспектива происхождения: внизу слева;
}
.pobm {
  перспектива-происхождение: низ;
}
.pobr {
  перспектива происхождения: внизу справа;
}
.po200200neg {
  перспективное происхождение: -200% -200%;
}
.po200200pos {
  перспективное происхождение: 200% 200%;
}
.po200200 {
  перспективное происхождение: 200% -200%;
}


.container {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  маржа: 24px;
  граница: нет;
}

.cube {
  ширина: 100%;
  высота: 100%;
  обратная видимость: видимая;
  перспектива: 300 пикселей;
  стиль преобразования: сохранить-3d;
}

.лицо {
  дисплей: блок;
  позиция: абсолютная;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: нет;
  высота строки: 100 пикселей;
  семейство шрифтов: без засечек;
  размер шрифта: 60 ​​пикселей;
  цвет белый;
  выравнивание текста: центр;
}


.передний {
  фон: rgba (0, 0, 0, 0.3);
  преобразовать: translateZ (50 пикселей);
}
.назад {
  фон: rgba (0, 255, 0, 1);
  черный цвет;
  преобразовать: rotateY (180deg) translateZ (50px);
}
.верно {
  фон: rgba (196, 0, 0, 0,7);
  преобразовать: rotateY (90deg) translateZ (50px);
}
.оставили {
  фон: rgba (0, 0, 196, 0,7);
  преобразовать: rotateY (-90deg) translateZ (50px);
}
.верх {
  фон: rgba (196, 196, 0, 0,7);
  преобразовать: rotateX (90deg) translateZ (50px);
}
.Нижний {
  фон: rgba (196, 0, 196, 0,7);
  преобразовать: rotateX (-90deg) translateZ (50px);
}


раздел {
  цвет фона: #EEE;
  отступ: 10 пикселей;
  семейство шрифтов: без засечек;
  выравнивание текста: слева;
  дисплей: сетка;
  сетка-шаблон-столбцы: повторить (3, 1fr);
}  

Результат

Как только вы это сделаете, вы можете работать с элементом в трехмерном пространстве.

— CSS: каскадные таблицы стилей

В декартовой системе координат двумерная точка описывается двумя значениями: координата x (абсцисса) и координата y (ордината). Это представлено векторным обозначением (x, y) .

В CSS (и большинстве компьютерной графики) начало координат (0, 0) представляет верхний левый угол любого элемента. Положительные координаты идут вниз и вправо от начала координат, а отрицательные — вверх и влево.Таким образом, точка на 2 единицы вправо и на 5 единиц вниз будет (2, 5) , а точка на 3 единицы влево и 12 единиц вверх будет (-3, -12) .

Функции преобразования изменяют внешний вид элемента, манипулируя значениями его координат. Функция линейного преобразования описывается с помощью матрицы 2 × 2, например:

акбд

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

acbdxy = ax + cybx + dy

Можно даже применить несколько преобразований подряд:

a1c1b1d1a2c2b2d2 = a1a2 + c1b2a1c2 + c1d2b1a2 + d1b2b1c2 + d1d2

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

Однако одно из основных преобразований не является линейным, и поэтому при использовании этого обозначения оно должно иметь специальный регистр: перевод. Вектор трансляции (tx, ty) должен быть выражен отдельно, как два дополнительных параметра.

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

Выберите один, и преобразование будет применено к кубу; через 2 секунды куб возвращается в исходное состояние. Начальное состояние куба немного повернуто с помощью transform3d () , чтобы вы могли видеть эффект всех преобразований.

HTML

  <основной>
  <раздел>
      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
  

  

     Выберите функцию преобразования 
    <выбор>
       Выбрать функцию 
       повернуть (360 градусов) 
       rotateX (360deg) 
       rotateY (360 градусов) 
       rotateZ (360deg) 
       rotate3d (1, 1, 1, 90deg) 
      <опция> масштаб (1.5) 
       scaleX (1.5) 
       scaleY (1.5) 
       scaleZ (1.5) 
       scale3d (1, 1.5, 1.5) 
       наклон (17deg, 13deg) 
       skewX (17deg) 
       skewY (17deg) 
       перевести (100 пикселей, 100 пикселей) 
       translateX (100px) 
       translateY (100px) 
       translateZ (100 пикселей) 
       translate3d (50 пикселей, 50 пикселей, 50 пикселей) 
       перспектива (200 пикселей) 
       matrix (1, 2, -1, 1, 80, 80) 
       matrix3d ​​(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)