Сочетание css-свойств: transform, translate, rotate, scale и offset

Функции transform

Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.

Translate

Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.

Возникает вопрос, зачем нужна эта функция, которая повторяет уже существующие возможности CSS по сдвигу элемента, например position? Но каких-то разъяснений не нашел.

Величина смещения может быть задана в любых применяемых в CSS единицах, например px или em. Если задать только один параметр, тогда смещение будет только по горизонтали. Отрицательные значения сдвигают элемент в противоположную сторону.

Также есть две функции для смещения элемента только одной оси X или Y.

Scale

Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – . Если задано одно значение воздействие будет по двум осям сразу.

Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим .

На демонстрации элемент с красным фоном увеличился в 2 раза.

See the Pen
scale by Андрей (@adlibi)
on CodePen.

Для масштабирования по одной оси есть соответствующие функции и .

С помощью них можно зеркально отразить элемент.

• — отразить по горизонтали;
• — отразить по вертикали;
• — одновременно перевернуть изображение по горизонтали и вертикали.

Rotate

Разворачивает элемент на плоскости. Например, повернет объект на 45% по часовой стрелке.

See the Pen
rotate by Андрей (@adlibi)
on CodePen.

Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:

deg обозначает градус поворота.

Scew

Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.

На примере ниже к синему квадрату применено (наклон только по горизонтали), а к красному функция (наклон по обоим осям).

See the Pen
skew by Андрей (@adlibi)
on CodePen.

Примечание: при некоторых значениях углов элемент может исчезать.

Matrix

Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.

Например через следующие две функции

будут записаны как:

Не очень удобно для человеческого восприятия, поэтому непонятно, кто будет этим пользоваться.

How do You Make Each Word in a String or Text Start With a Capital Letter or Title Case the Text?

Title case is where each word in a sentence or string starts with a capital letter. The capitalize value causes a string to render in title case, or at least each word starts with a capital letter.

If a letter in the formatted text is uppercase it will not lower case the letter to make proper title case.

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but Every wOrd Starts wITH a Capital lEETTER.

this example is a more proper title case example.

transform : capitalize

Notice how the first paragraph, with a random mix of capital and lower case characters does not lower case all the characters? That’s because capitalize is not title-case.

Right now there is no titlecase value available. Instead you should take care to lower case the source before rendering.

Using a Pseudo Selector to Apply a text-transform to the First Letter

A relatively modern feature available to CSS selectors is the concept of a pseudo selector. You can use the ::first-letter selector to apply a different style to the first character of a string.

This allows you to apply some ‘fancy’ styling if you would like. Think about it as way to create that calligraphy affect where the first letter of a chapter is large and decorative.

In this example the lowercase text-transform is applied to the sentence. Then the ::first-letter selector is used to apply custom styling to the paragraph’s first letter. Specifically the first letter is upper case, larger and has a different font family applied.

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but THE firST wOrd Starts wITH a laRGe Capital lEETTER. This is a second sentance.

first-letter Selector

Трехмерное масштабирование элементов

Следующая функция, которую мы рассмотрим это функция scale3d(), она определяет трехмерное преобразование путем масштабирования элемента по оси X, по оси Y и по оси Z. Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Трехмерное масштабирование элементов по осям</title>
<style>
.static {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
margin: 10px; /* внешние отступы со всех сторон */
background: gray; /* цвет заднего фона */
}
div {
width: 180px; /* ширина элемента */
height: 100px; /* высота элемента */
line-height: 100px; /* высота строки (выраывниваем по вертикали) */
text-align: center; /* горизонтальное выравнивание текста по центру */
transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */
}
.test2, .test4, .test6 {background: orange;} /* цвет заднего фона */
.test, .test3, .test5 {background: plum;} /* цвет заднего фона */
.test:hover {
transform: perspective(500px) rotateX(45deg) scale3d(1,2,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test2:hover {
transform: perspective(500px) rotateX(45deg) scale3d(2,1,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test3:hover {
transform: perspective(500px) rotateX(45deg) scale3d(1,1,2); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test4:hover {
transform: perspective(500px) rotateX(45deg) scale3d(-1,-2,-1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test5:hover {
transform: perspective(500px) rotateX(45deg) scale3d(0.5,1,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
.test6:hover {
transform: perspective(500px) rotateX(45deg) scale3d(0.5,0.5,2); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */
}
</style>
</head>
	<body>
		<div class = "static"><div class = "test">scale3d(1,2,1)</div></div>
		<div class = "static"><div class = "test2">scale3d(2,1,1)</div></div>
		<div class = "static"><div class = "test3">scale3d(1,1,2)</div></div><br>
		<div class = "static"><div class = "test4">scale3d(-1,-2,-1)</div></div>
		<div class = "static"><div class = "test5">scale3d(0.5,1,1)</div></div>
		<div class = "static"><div class = "test6">scale3d(0.5,0.5,2)</div></div>
	</body>
</html>

В этом примере были использованы различные значения функции scale3d(), благодаря которой, мы масштабируем элемент сразу по трём осям.
Для демонстрации работы трехмерного масштабирования функцией scale3d(), мы добавили функцию rotateX(), которая поворачивает наш элемент по оси X и функцию преобразования perspective(), которая определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины.

Результат нашего примера:

Рис. 180 Трехмерное масштабирование элементов по осям (функция преобразования элемента scale3d).

The CSS text-transform Property

The CSS text-transform property is the key to managing text uppercase and lowercase rendering. There are 5 different values you can use:

1. lowercase: makes all of the letters in the selected text lowercase
2. uppercase: makes all of the letters in the selected text uppercase or ALL CAPS
3. capitalize: capitalizes the first letter of each word in the selected text
4. none: leaves the text’s case and capitalization exactly as it was entered
5. inherit: gives the text the case and capitalization of its parent
6. full-width: Is a keyword forcing the writing of a character (mainly ideograms and latin scripts) inside a square, allowing them to be aligned in the usual East Asian scripts

CSS lowercase

Using the lowercase value forces the text or font to be rendered using lowercase characters.

THIS IS A SCREAMING SENTANCE THAT CAN BE SOFTENED USING LOWERCASE!

transform: lowercase

CSS uppercase — How to Capitalize All Letters in Word

Using the uppercase value forces the text or font to be rendered using uppercase characters.

this example converts an all lowercase string to screaming uppercase.

transform : uppercase

Цитаты и другие частные случаи

Можно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}
<p><span class="myinitialcapsq">&ldquo;</span><span class="myinitialcapsi">I</span>ncluding&rdquo; a new class with a negative margin pulls it closer.</p>

CSSCGOQ

Капитель в CSS

Малые заглавные, или капитель (англ. small caps) — начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы.
Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:

cелектор {
font-variant: small-caps; /* задаем капитель шрифта */
}

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства font-variant</title>
<style> 
.test {
font-variant : small-caps; /* задаем капитель шрифта */
}
</style>
</head>
	<body>
		<p>Параграф отображается обычным шрифтом.</p>
		<p class = "test">Строчные буквы устанавливаются как прописные уменьшенного размера.</p>
	</body>
</html>

В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps, благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).

Рис. 67 Пример использования свойства font-variant (капитель шрифта).

Syntax

Is a keyword forcing the first letter of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element’s text. A letter is any Unicode character part of the Letter or Number general categories : it excludes any punctuation marks or symbols at the beginning of the word.

Authors should not expect to follow language-specific titlecasing conventions (such as skipping articles in English).

Is a keyword forcing all characters to be converted to uppercase.

Is a keyword forcing all characters to be converted to lowercase.

Is a keyword preventing the case of all characters to be changed.

Is a keyword forcing the writing of a character, mainly ideograms and latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

2D-трансформации элементов

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

1. Функции 2D-трансформации transform

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

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

matrix() — любое числоtranslate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %scale(), scaleX(), scaleY() — любое числоrotate() — угол (deg, grad, rad или turn)skew(), skewX(), skewY() — угол (deg, grad, rad)

Синтаксис

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

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

2. Точка трансформации transform-origin

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

Синтаксис

See the Pen aNQNva by Elena Nazarova (@nazarelen) on CodePen.

3. Множественные трансформации

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

div {transform: scale(1.5) rotate(-10deg);}

CSS3-переходы
CSS3-анимация

When should I capitalize text?

Below is a list of some of the general rules that should be followed when capitalizing words.

• Always capitalize the first word of a sentence.
• If the word is a proper noun or derived from a proper noun, the first letter should be capitalized. For example, a name, book, brand, movie, place, product, and trademark are proper nouns and should be capitalized.
• Capitalize the first letter of a quote unless it is part of the sentence.
• Roads and streets should be capitalized.
• A person’s title (not occupation) before their name should be capitalized.

Below is a list of times capitalization should not be used.

• Never user uppercase for emphasis. Instead, italicize any text you want to emphasize.
• When writing the full form of an acronym, each word of the acronym should be lowercase unless it is a proper noun.
• Do not capitalize the word the when used before a proper noun.

Should titles and headings be capitalized?

With formal writing, the titles and headings should use title case. All other forms of writing should follow the rules set by the used style guide. For example, Computer Hope follows the Microsoft Manual of Style and uses sentence case for its headings.