Содержание

Свойство transform | CSS справочник

ЗначениеОписание
noneУказывает, что к элементу не применяется никакой трансформации. Это значение по умолчанию.
matrix(n,n,n,n,n,n)Определяет двухмерное преобразование с помощью матрицы из шести значений.

Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)Определяет трехмерное преобразование с помощью матрицы 4×4 из шестнадцати значений в порядке столбцов. Все другие трехмерные функции преобразований основаны на функции matrix3d. Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21.
translate(x,y)Определяет двухмерное преобразование путем сдвига элемента влево, вправо, вверх или вниз, используя координаты по оси x и y(отрицательные значения отвечают за сдвиг влево и вверх, положительные за сдвиг вправо и вниз). Элемент, к которому применяется сдвиг не влияет на поток документа.
translate3d(x,y,z)Задает трехмерное преобразование путем сдвига элемента, используя координаты трёх осей.
translateX(x)Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси x.
translateY(y)Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси y.
translateZ(z)Определяет трехмерное преобразование путем сдвига элемента, используя только значение по оси z.
scale(x,y)Определяет двухмерное преобразование путем масштабирования элемента по оси x и по оси y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси x, так и по оси y. К примеру, значение scale(0.5) уменьшит элемент в 2 раза (как по оси x, так и по y). Другими словами, значения больше одного при масштабировании увеличивают элемент, меньше одного — уменьшают. При использовании отрицательных значений элемент отображается зеркально. Масштабируемый элемент увеличивается, либо уменьшается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin).
scale3d(x,y,z)Определяет трехмерное преобразование путем масштабирования элемента по оси x, y и по оси z.
scaleX(x)Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси x.
scaleY(y)Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси y.
scaleZ(z)Определяет трехмерное преобразование путем масштабирования элемента, используя только значение по оси z.
rotate(angle)Задает двухмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin).

Допускается указывать значения угла в следующих единицах:

  • deg — градусы. Оборот окружности составляет 360deg.
  • grad — грады. Оборот окружности составляет 400grad.
  • rad — радианы. Оборот окружности составляет 2π (~6.28rad).
  • turn — обороты. Оборот окружности составляет 1turn.
Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно ~1.57rad.
rotate3d(x,y,z,angle)Задает трехмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается под углом, задаваемым последним п

transform | CSS справочник

CSS свойство transform применяет 2D или 3D преобразование к элементу. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

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

Значение по умолчанию: none
Применяется: к трансформируемым элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transform=»rotate(7deg)»
Значение Описание
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 преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Определяет смещение, только по оси Х.
translateY(y)		 Определяет смещение, только по оси У.
translateZ(z) Определяет 3D смещение, только по оси Z.
scale(x,y) Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент.

Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin.
scale3d(x,y,z) Применяет 3D преобразование масштаба.
scaleX(x) Определяет преобразование масштаба по оси Х.
scaleY(y) Определяет преобразование масштаба по оси У.
scaleZ(z)
Определяет 3D преобразование масштаба по оси Z.
rotate(angle) Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,angle) Определяет 3D поворот.
rotateX(angle) Определяет 3D поворот вдоль оси Х.
rotateY(angle) Определяет 3D поворот вдоль оси У.
rotateZ(angle)
Определяет 3D поворот вдоль оси Z.
skew(x, y) Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X.
skewX(angle) Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle) Определяет 2D преобразование наклона вдоль оси У.
perspective(n) Определяет перспективу для преобразования 3D элемента.
inherit Указывает, что значение наследуется от родительского элемента.

text-transform | CSS | WebReference

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.

Краткая информация

Значение по умолчаниюnone
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис 

text-transform: capitalize | lowercase | uppercase | none

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

capitalize
Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase
Все символы текста становятся строчными (нижний регистр).
uppercase
Все символы текста становятся прописными (верхний регистр).
none
Не меняет регистр символов.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-transform</title> <style> h2 { text-transform: uppercase; /* Заглавные буквы */ } p { text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */ } </style> </head> <body> <h2>Культурный памятник Средневековья</h2> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. </p> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства text-transform

Рис. 1. Применение свойства text-transform

Объектная модель

Объект.style.textTransform

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

text-transform | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

capitalize
Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase
Все символы текста становятся строчными (нижний регистр).
uppercase
Все символы текста становятся прописными (верхний регистр).
none
Не меняет регистр символов.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-transform</title>
  <style>
   h2 { 
    text-transform: uppercase; /* Заглавные буквы */
   }
   p { 
    text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */
   }
  </style>
 </head>
 <body> 
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementById(«elementID»).style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Transform • Про CSS

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

Спецификация: www.w3.org/TR/css3-transforms/.

Используя свойство transform можно задавать элементу одну и более функций для трансформации. Все функции можно найти тут: Transform Functions

Возможные значения: none или функции трансформаций через пробел.

Примеры трансформаций:

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

transform: translateZ(5em) rotateY(90deg);

и

transform: rotateY(90deg) translateZ(5em);

дадут совершенно разный результат, а строчка:

transform: rotateY(45deg) rotateY(45deg);

повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.

Transform-origin

Свойство определяет центр трансформации.

Возможные значения: расстояния в пикселях или процентах или ключевые слова (left, center, right, top, bottom).

Исходное значение: 50% 50% — центр элемента.

Координаты отсчитываются от верхнего левого угла элемента. Если задано только одно значение, второе принимает значение center. Если задано два значения, третье принимает значение 0.

Transform-style

Определяет поддержку 3D внутри трансформируемого элемента.

Возможные значения:

flat — трансформируемый элемент плоский

preserve-3d — трансформируемый элемент имеет внутренний объем

Следующие свойства могут перекрывать действие transform-style: preserve-3d; и делать отображение элемента плоским независимо от значения transform-style:

overflow с любым значением кроме visible

opacity с любым значением кроме 1 (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем transform-style: preserve-3d;. На одном уровне они не мешают друг другу) так было на момент написания статьи, сейчас прозрачность делает трёхмерный элемент плоским.

filter с любым значением кроме none

Perspective

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

Возможные значения: none или длина в пикселях.

Perspective-origin

Отвечает за расположение точки, от которой отсчитывается перспектива. По сути, задается положение зрителя относительно сцены.

Возможные значения: расстояния в пикселях или процентах или ключевые слова (left, center, right, top, bottom).

Backface-visibility

Определяет видимость задней стороны объекта.

Возможные значения:

visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию).

hidden — скрывать объект, если он повернут «спиной».

Свойство text-transform | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-transform управляет регистром текста.

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

CSS синтаксис:

text-transform:"none | capitalize | uppercase | lowercase | initial | inherit";

JavaScript синтаксис:

object.style.textTransform = "capitalize"

Значения свойства

ЗначениеОписание
noneТекст отображается как есть (регистр букв не изменяется). Это значение по умолчанию.
capitalizeПреобразует первые символы каждого слова в верхний регистр.
uppercaseПреобразует все символы в верхний регистр.
lowercaseПреобразует все символы в нижний регистр.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство text-transform.</title>
<style> 
.test {
text-transform : capitalize; /* преобразуем первые символы каждого слова в верхний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
.test2 {
text-transform : uppercase; /* преобразуем все символы в верхний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
.test3 {
text-transform : lowercase; /* преобразуем все символы в нижний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
</style>
</head>
	<body>
		<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	</body>
</html>
Пример изменения регистра текста, используя CSS. CSS свойства

CSS3-переходы (свойство transition)

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover. Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after. Для задания всех свойств перехода обычно используют краткую запись свойства transition.

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

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

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

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

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

transition-property
Значения:
noneОтсутствие свойства для перехода.
allЗначение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.
свойствоОпределяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

2. Продолжительность перехода transition-duration

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

transition-duration
Значения:
времяВремя перехода указывается в секундах или миллисекундах, например, 2s или 5ms.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
transition-duration: .2s;
}

See the Pen LRpLbk by Elena (@html5book) on CodePen.

3. Функция перехода transition-timing-function

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

transition-timing-function
Значения:
easeФункция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linearПереход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-inПереход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-outПереход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-outПереход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2)Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
transition-timing-function: linear;
}

See the Pen CSS Timing Function by Elena Nazarova (@nazarelen) on CodePen.

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

easingРис. 1. Пользовательские функции cubic Bézier с сайта easings.net
Пользовательское названиеЗначение функции
easeInSinecubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSinecubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSinecubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuadcubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuadcubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuadcubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubiccubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubiccubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubiccubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuartcubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuartcubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuartcubic-bezier(0.77, 0, 0.175, 1)
easeInQuintcubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuintcubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuintcubic-bezier(0.86, 0, 0.07, 1)
easeInExpocubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpocubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpocubic-bezier(1, 0, 0, 1)
easeInCirccubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirccubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirccubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBackcubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBackcubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBackcubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay

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

transition-delay
Значения:
времяВремя задержки перехода указывается в секундах или миллисекундах.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

div {
transition-delay: .5s;
}

See the Pen wzKZoj by Elena (@html5book) on CodePen.

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;

Если воспользоваться значениями по умолчанию, то запись

div {transition: 1s;}

будет эквивалентна

div {transition: all 1s ease 0s;}

6. Плавный переход нескольких свойств

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

div {transition: background 0.3s ease, color 0.2s linear;}

или

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

7. Примеры переходов для различных свойств

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

See the Pen gbLXYK by HeleN (@nazarelen) on CodePen.

CSS свойство преобразования текста


Пример

Преобразование текста в различные элементы

:

div.a {
преобразование текста: прописные буквы;
}

div.b {
преобразование текста: нижний регистр;
}

div.c {
преобразование текста: заглавные буквы;
}

Попробуй сам »

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

Свойство text-transform управляет заглавными буквами текста.

Значение по умолчанию: нет
Унаследовано: да
Версия: CSS1
Синтаксис JavaScript: объект .style.textTransform = «прописные буквы» Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
преобразование текста 1,0 4.0 1,0 1,0 7,0

Синтаксис CSS

преобразование текста: нет | заглавные | прописные | строчные | начальные | наследование;

Стоимость объекта

Значение Описание Сыграй
нет Без заглавных букв. Текст отображается как есть.Это значение по умолчанию Играй »
увеличить Преобразует первый символ каждого слова в верхний регистр Играй »
прописные Преобразует все символы в верхний регистр Играй »
строчная Преобразует все символы в нижний регистр Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальных Играй »
наследство Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HTML DOM: свойство textTransform


.

CSS 2D преобразований

CSS 2D-преобразования

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

Наведите указатель мыши на элемент ниже, чтобы увидеть 2D-преобразование:

В этой главе вы узнаете о следующем свойстве CSS:

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
преобразовать 36.0
10,0
16,0
9,0
23,0

CSS 2D-методы преобразования

С помощью свойства CSS transform вы можете использовать следующие методы 2D преобразования:

  • перевести ()
  • повернуть ()
  • шкала X ()
  • шкала Y ()
  • шкала ()
  • skewX ()
  • косой ()
  • перекос ()
  • матрица ()

Совет: Вы узнаете о трехмерных преобразованиях в следующей главе.

Метод translate ()

Метод translate () перемещает элемент из его текущей позиции (согласно параметрам, указанным для оси X и оси Y).

В следующем примере элемент

перемещается на 50 пикселей вправо, и на 100 пикселей вниз от текущего положения:

Метод rotate ()

Метод rotate () вращает элемент по или против часовой стрелки в зависимости от заданного градуса.

В следующем примере элемент

поворачивается на 20 градусов по часовой стрелке:

Использование отрицательных значений приведет к вращению элемента против часовой стрелки.

В следующем примере элемент

вращается против часовой стрелки на 20 градусов:

The scale () Метод

Метод scale () увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).

В следующем примере элемент

увеличивается в два раза от его исходной ширины и в три раза от его исходной высоты:

В следующем примере элемент

уменьшается до половины его исходной ширины и высоты:

Метод scaleX ()

Метод scaleX () увеличивает или уменьшает ширина элемента.

В следующем примере элемент

увеличивается в два раза от его исходной ширины:

В следующем примере элемент

уменьшается до половины его исходной ширины:

Метод scaleY ()

Метод scaleY () увеличивает или уменьшает высота элемента.

В следующем примере элемент

увеличивается в три раза от исходного. высота:

В следующем примере элемент

уменьшается до половины от исходного. высота:

Метод skewX ()

Метод skewX () наклоняет элемент по оси X на заданный угол.

В следующем примере элемент

наклоняется на 20 градусов по Ось X:

Метод skewY ()

Метод skewY () наклоняет элемент вдоль оси Y на заданный угол.

В следующем примере элемент

наклоняется на 20 градусов по оси Y:

Метод skew ()

Метод skew () наклоняет элемент по осям X и Y на заданные углы.

В следующем примере элемент

наклоняется на 20 градусов по оси X и на 10 градусов по оси Y:

Если второй параметр не указан, он имеет нулевое значение.Итак, в следующем примере элемент

наклоняется на 20 градусов по оси X:

Метод matrix ()

Метод matrix () объединяет все методы 2D-преобразования в один.

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

Параметры следующие: matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())

Проверьте себя упражнениями!

Свойства преобразования CSS

В следующей таблице перечислены все свойства 2D-преобразования:

Объект Описание
преобразовать Применяет 2D или 3D преобразование к элементу
преобразование происхождения Позволяет изменять положение трансформируемых элементов

CSS 2D методы преобразования

Матрица Масштаб
Функция Описание
( n, n, n, n, n, n ) Определяет двухмерное преобразование с использованием матрицы из шести значений
перевести ( x, y ) Определяет 2D-перенос, перемещая элемент по осям X и Y
translateX ( n ) Определяет 2D-перемещение, перемещая элемент по оси X
translateY ( n ) Определяет 2D-перенос, перемещая элемент по оси Y
( x, y ) Определяет преобразование 2D-масштаба, изменяя ширину и высоту элементов.
scaleX ( n ) Определяет масштабное преобразование 2D, изменяя ширину элемента.
scaleY ( n ) Определяет преобразование 2D масштаба, изменяя высоту элемента
повернуть ( угол ) Определяет 2D-поворот, угол указывается в параметре
перекос ( x-угол, y-) Определяет двухмерное преобразование наклона по осям X и Y.
skewX ( угол ) Определяет двухмерное преобразование наклона по оси X
skewY ( угол ) Определяет двухмерное преобразование наклона по оси Y

.

Преобразование текста — Попутный ветер CSS

Нормальный регистр

Используйте утилиту .normal-case , чтобы сохранить исходный регистр. Обычно это используется для сброса заглавных букв в разных точках останова.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

  
 Быстрая коричневая лиса ...

Прописные буквы

Используйте утилиту .uppercase для текста в верхнем регистре.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

  
 Быстрая коричневая лиса ...

Строчные

Используйте утилиту .lowercase для строчных букв.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

  
 Быстрая коричневая лиса ...

Заглавные буквы

Используйте утилиту .capitalize для написания текста с заглавной буквы.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

  
 Быстрая коричневая лисица...

Адаптивный

Чтобы управлять преобразованием текста элемента в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите преобразования текста. Например, используйте md: uppercase , чтобы применить утилиту uppercase только для средних размеров экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

  

  Быстрая, коричневая лиса, перепрыгнула через ленивого пса.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

Настройка

Варианты ответа и псевдокласса

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

Вы можете контролировать, какие варианты генерируются для утилит преобразования текста, изменив свойство textTransform в разделе вариантов файла tailwind.config.js .

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

  // попутный ветер.config.js
  module.exports = {
    варианты: {
      // ...
- textTransform: ['отзывчивый'],
+ textTransform: ['отзывчивый', 'наведение', 'фокус'],
    }
  }

Отключение

Если вы не планируете использовать утилиты преобразования текста в своем проекте, вы можете полностью отключить их, установив для свойства textTransform значение false в разделе corePlugins вашего файла конфигурации:

  // tailwind.config.js
  модуль.экспорт = {
    corePlugins: {
      // ...
+ textTransform: ложь,
    }
  }
.

Свойство преобразования стиля HTML DOM

❮ Объект стиля

Пример

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

document.getElementById («myDIV»). style.transform = «повернуть (7deg)»;

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

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

Свойство преобразования применяет к элементу двухмерное или трехмерное преобразование. Это свойство позволяет вращать, масштабировать, перемещать, наклонять и т. д. элементы.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
преобразование 36,0 10,0
9,0 мс Преобразование		 16,0 9,0 23,0

Синтаксис

Вернуть свойство преобразования:

Установите свойство преобразования:

объект .style.transform = «none | transform-functions | initial | наследуем»

Значения собственности

Матрица Масштаб
Значение Описание
нет Определяет, что преобразования не должно быть
( n, n, n, n, n, n ) Определяет двухмерное преобразование с использованием матрицы из шести значений
matrix3d ​​( n, n, n, n и т. Д…. ) Определяет 3D-преобразование с использованием матрицы 4×4 из 16 значений
перевести ( x, y ) Определяет 2D-перевод
translate3d ( x, y, z ) Определяет 3D-перевод
translateX ( x ) Определяет перенос, используя только значение для оси X
translateY ( y ) Определяет перемещение, используя только значение для оси Y
translateZ ( z ) Определяет трехмерное перемещение, используя только значение для оси Z
( x, y ) Определяет масштабное преобразование 2D
scale3d ( x, y, z ) Определяет преобразование трехмерного масштаба
масштаб X ( x ) Определяет преобразование масштаба, задавая значение для оси X
масштабY ( y ) Определяет масштабное преобразование, задавая значение для оси Y
scaleZ ( z ) Определяет преобразование трехмерного масштаба, задавая значение для оси Z
поворот ( угол ) Определяет 2D-поворот, угол указывается в параметре
rotate3d ( x, y, z, угол ) Определяет трехмерное вращение
rotateX ( угол ) Определяет трехмерное вращение по оси X
повернутьY ( угол ) Определяет трехмерное вращение по оси Y
rotateZ ( угол ) Определяет трехмерное вращение по оси Z
перекос ( x-угол, y-угол ) Определяет двухмерное преобразование наклона по осям X и Y.
skewX ( угол ) Определяет двухмерное преобразование наклона по оси X
перекос ( угол ) Определяет двухмерное преобразование наклона по оси Y
перспектива ( n ) Определяет вид в перспективе для трехмерного преобразованного элемента
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальная
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Технические характеристики

Значение по умолчанию: нет
Возвращаемое значение: Строка, представляющая свойство преобразования элемента
Версия CSS CSS3

Связанные страницы

Ссылка CSS: свойство преобразования

❮ Стиль объекта .

No related posts.