Как это работает?

Эффект трансформации позволяет изменять форму элемента, размер и положение.

Вы можете преобразовать ваши элементы с помощью 2D-или 3D-трансформации.

2D трансформации

В этой главе вы узнаете о методах 2d трансформации:

translate()
rotate()
scale()
skew()
matrix()

В следующей главе вы узнаете о 3d трансформации

<style> 
div
{
 width:200px;
 height:100px;
 background-color:yellow;
 /* Rotate div */
 transform:rotate(30deg);
 -ms-transform:rotate(30deg); /* IE 9 */
 -moz-transform:rotate(30deg); /* Firefox */
 -webkit-transform:rotate(30deg); /* Safari and Chrome */
 -o-transform:rotate(30deg); /* Opera */
 text-align:right;
}
</style>

Метод translate()

С помощью метода translate(), элемент перемещается из текущего положения, в зависимости от параметров, приведенных для левой (X-ось) и верхней (Y-ось) позиции

<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:translate(50px,100px);
 -ms-transform:translate(50px,100px); /* IE 9 */
 -moz-transform:translate(50px,100px); /* Firefox */
 -webkit-transform:translate(50px,100px); /* Safari and Chrome */
 -o-transform:translate(50px,100px); /* Opera */
}
</style>

Значение translate(50px,100px) передвигает элемент 50 пикселей слева, и 100 пикселей сверху.

Метод rotate()

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

<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:rotate(30deg);
 -ms-transform:rotate(30deg); /* IE 9 */
 -moz-transform:rotate(30deg); /* Firefox */
 -webkit-transform:rotate(30deg); /* Safari and Chrome */
 -o-transform:rotate(30deg); /* Opera */
}
</style>

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

Метод scale()

С помощью метода scale(), элемент увеличивает или уменьшает размер, в зависимости от параметров, приведенных для ширины (X-ось) и высоты (Y-ось)

<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 margin:100px;
 transform:scale(2,4);
 -ms-transform:scale(2,4); /* IE 9 */
 -moz-transform:scale(2,4); /* Firefox */
 -webkit-transform:scale(2,4); /* Safari and Chrome */
 -o-transform:scale(2,4); /* Opera */
}
</style>

Значение scale(2,4) увелививает ширину в два раза от своего первоначального размера, а высоту в 4 раза от первоначального размера.

Метод skew()

С помощью метода skew(), элемент поворачивается с данным углом, в зависимости от параметров, приведенных для горизонтальной (X-ось) и вертикальной (Y-ось) линии

<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:skew(30deg,20deg);
 -ms-transform:skew(30deg,20deg); /* IE 9 */
 -moz-transform:skew(30deg,20deg); /* Firefox */
 -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
 -o-transform:skew(30deg,20deg); /* Opera */
}
</style>

русский עברית

Инструменты

Пользовательское меню с линейными градиентамиЛучший Хостинг

Свойства CSS3

Свойства анимации

@keyframesanimationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-state

Свойства фона

backgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-repeatbackground-clipbackground-originbackground-size

Свойства границы и контура

borderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthoutlineoutline-coloroutline-styleoutline-widthborder-bottom-left-radiusborder-bottom-right-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-radiusborder-top-left-radiusborder-top-right-radiusbox-shadow

Свойства коробки

overflow-xoverflow-yoverflow-stylerotationrotation-point

Свойства цвета

opacity

Свойства меры

heightmax-heightmax-widthmin-heightmin-widthwidth

Свойства гибкой коробки

box-alignbox-directionbox-flexbox-flex-groupbox-linesbox-ordinal-groupbox-orientbox-pack

Свойства шрифта

fontfont-familyfont-sizefont-stylefont-variantfont-weight@font-facefont-size-adjustfont-stretch

Свойства генерированного содержания

contentcounter-incrementcounter-resetquotes

Свойства сетки

grid-columnsgrid-rows

Свойства гиперссылки

targettarget-nametarget-newtarget-position

Свойства списка

list-stylelist-style-imagelist-style-positionlist-style-type

Свойства поля

marginmargin-bottommargin-leftmargin-rightmargin-top

Свойства нескольких колонок

column-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumns

Свойства заполнения

paddingpadding-bottompadding-leftpadding-rightpadding-top

Свойства позиционирования

bottomclearclipcursordisplayfloatleftoverflowpositionrighttopvisibilityz-index

Свойства печати

page-break-afterpage-break-beforepage-break-inside

Свойства таблицы

border-collapseborder-spacingcaption-sideempty-cellstable-layout

Свойства текста

colordirectionletter-spacingline-heighttext-aligntext-decorationtext-emphasistext-indenttext-transformvertical-alignwhite-spaceword-spacinghanging-punctuationpunctuation-trimtext-justifytext-outlinetext-overflowtext-shadowtext-wrapword-breakword-wrap

Свойства трансформации 2D/3D

transformtransform-origintransform-styleperspectiveperspective-originbackface-visibility

Свойства перехода

transitiontransition-propertytransition-durationtransition-timing-functiontransition-delay

Свойства пользовательского интерфейса

appearancebox-sizingiconnav-downnav-indexnav-leftnav-rightnav-upoutline-offsetresize

Нашли ошибку в тексте?

Отметьте её курсором и нажмите

Ctrl + Enter

Проверка орфографии Xhtml.co.il

Рассылка

Присоединитесь к списку рассылки для получения последних новостей

Пособие по CSS3

CSS3CSS3 ВведениеCSS3 ГраницыCSS3 ФонCSS3 Текстовые эффектыCSS3 ШрифтыCSS3 2D трансформацииCSS3 3D трансформацииCSS3 ПереходыCSS3 АнимацииCSS3 Несколько колонокCSS3 Пользовательский интерфейс

Ссылки CSS3

CSS3 СвойстваCSS3 Поддержка браузеровCSS3 СелекторыCSS3 Слуховые ссылкиCSS3 Комбинации шрифтаCSS3 Единицы измеренияCSS3 ЦветаCSS3 Значения цветовCSS3 Имена цветовCSS3 HEX значения цветов

Селекторы CSS3

.class#id*elementelement,elementelement elementelement>elementelement+element[attribute][attribite=value][attribite~=value][attribite|=language][attribite^=value][attribite$=value][attribite*=value]:link:visited:active:hover:focus:first-letter:first-line:first-child:before:after:lang(language):first-of-type:last-of-type:only-of-type:only-child:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child:root:empty:target:enabled:disabled:checked:not(selector)::selection

Примеры CSS3

Браузеры

Главная страница браузеров.Статистика браузеровСтатистика ОССтатистика изображенияБраузер ExplorerБраузер NetscapeПроект MozillaБраузер FirefoxБраузер OperaБраузер ChromeБраузер SafariМобильные браузеры

2D трансформации CSS3

Трансформация CSS3

С помощью трансформации CSS3, мы можем перемещать, масштабировать, переворачивать, и растягивать элементы.

Как это работает?

Эффект трансформации позволяет изменять форму элемента, размер и положение.

Вы можете преобразовать ваши элементы с помощью 2D-или 3D-трансформации.

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

Свойство	Поддержка браузеров
transform	-ms-	-moz-	-webkit-	-webkit-	-o-

צבעים HSL

ערכי צבע HSL נתמכים ב-IE9+, Firefox, Chrome, Safari, ו- Opera 10+.

HSL מציין את הגוון, הרוויה והבהירות - והוא מייצג צבע גלילי-קואורדינטות.

ערך צבע HSL מוגדר עם: hsl(hue, saturation, lightness).

Hue הוא מידת בגלגל הצבעים (מ- 0 עד 360) - 0 (או 360) זה אדום, 120 זה ירוק, 240 זה כחול. Saturation הוא ערך באחוזים: 0% פירושו גוון של אפור 100% הוא צבע מלא. Lightness הוא גם ערך באחוזים; 0% זה שחור, 100% זה לבן.

2D трансформации

В этой главе вы узнаете о методах 2d трансформации:

translate()
rotate()
scale()
skew()
matrix()

В следующей главе вы узнаете о 3d трансформации.

Пример

Пример 2D трансформации

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
 width:200px;
 height:100px;
 background-color:yellow;
 /* Rotate div */
 transform:rotate(30deg);
 -ms-transform:rotate(30deg); /* IE 9 */
 -moz-transform:rotate(30deg); /* Firefox */
 -webkit-transform:rotate(30deg); /* Safari and Chrome */
 -o-transform:rotate(30deg); /* Opera */
 text-align:right;
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

Результат выполнения кода выше:

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

Метод translate()

С помощью метода translate(), элемент перемещается из текущего положения, в зависимости от параметров, приведенных для левой (X-ось) и верхней (Y-ось) позиции:

Пример

Пример метода translate()

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:translate(50px,100px);
 -ms-transform:translate(50px,100px); /* IE 9 */
 -moz-transform:translate(50px,100px); /* Firefox */
 -webkit-transform:translate(50px,100px); /* Safari and Chrome */
 -o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

Результат выполнения кода выше:

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

Значение translate(50px,100px) передвигает элемент 50 пикселей слева, и 100 пикселей сверху.

Метод rotate()

Пример

Пример метода rotate()

<!DOCTYPE html>
<html>
<head>

<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:rotate(30deg);
 -ms-transform:rotate(30deg); /* IE 9 */
 -moz-transform:rotate(30deg); /* Firefox */
 -webkit-transform:rotate(30deg); /* Safari and Chrome */
 -o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

Результат выполнения кода выше:

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

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

Метод scale()

С помощью метода scale(), элемент увеличивает или уменьшает размер, в зависимости от параметров, приведенных для ширины (X-ось) и высоты (Y-ось):

Пример

Пример метода scale()

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 margin:100px;
 transform:scale(2,4);
 -ms-transform:scale(2,4); /* IE 9 */
 -moz-transform:scale(2,4); /* Firefox */
 -webkit-transform:scale(2,4); /* Safari and Chrome */
 -o-transform:scale(2,4); /* Opera */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

Результат выполнения кода выше:

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

Метод skew()

С помощью метода skew(), элемент поворачивается с данным углом, в зависимости от параметров, приведенных для горизонтальной (X-ось) и вертикальной (Y-ось) линии:

Пример

Пример метода skew()

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:skew(30deg,20deg);
 -ms-transform:skew(30deg,20deg); /* IE 9 */
 -moz-transform:skew(30deg,20deg); /* Firefox */
 -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
 -o-transform:skew(30deg,20deg); /* Opera */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

Результат выполнения кода выше:

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

Значение skew(30deg,20deg) поворачивает элемент 30 градусов вокруг оси X, и 20 градусов вокруг оси Y.

Метод matrix()

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

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

<style> 
div
{
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
}
div#div2
{
 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
 -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
 -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
</style>

Новые свойства трансформации

В следующей таблице перечислены все свойства трансформации:

Свойство	Описание	CSS
transform	Применяет 2D или 3D трансформацию к элементу	3
transform-origin	Позволяет изменить позицию трансформированных элементов	3

Методы 3D трансформации

Функция	Описание
matrix(n,n,n,n,n,n)	Определяет 2D трансформацию, с помощью матрицы 6 значений
translate(x,y)	Определяет 2D трансформацию, перемещяя элемент по оси X и Y
translateX(n)	Определяет 2D трансформацию, перемещяя элемент по оси X
translateY(n)	Определяет 2D трансформацию, перемещяя элемент по оси Y
scale(x,y)	Определяет 2D трансформацию, изменяя ширину и высоту элемента
scaleX(n)	Определяет 2D трансформацию, изменяя ширину элемента
scaleY(n)	Определяет 2D трансформацию, изменяя высоту элемента
rotate(angle)	Определяет 2D вращение, с помощью угла, указанного в параметре
skew(x-angle,y-angle)	Определяет 2D трансформацию искажения вдоль оси X и Y
skewX(angle)	Определяет 2D трансформацию искажения вдоль оси X
skewY(angle)	Определяет 2D трансформацию искажения вдоль оси Y

web-development.ucoz.ru

Трансформация CSS3

Как это работает?

2D трансформации

Метод translate()

Метод rotate()

Метод scale()

Метод skew()

2D трансформации CSS3

Трансформация CSS3

Как это работает?

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

צבעים HSL

2D трансформации

Пример

Метод translate()

Пример

Метод rotate()

Пример

Метод scale()

Пример

Метод skew()

Пример

Метод matrix()

Новые свойства трансформации

Методы 3D трансформации