Вверх страницы

Вниз страницы

Forix ФоРуМ рунета

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Свойство CSS transform

.т5. Свойство CSS transform

Страница: 1

Сообщений 1 страница 7 из 7

1

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

Синтаксис CSS transform
transform: трансформация1 [трансформация2];
Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

Примечание про браузеры
Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

-ms-transform - для IE9 и старше (младше девятой версии трансформация не поддерживается
-webkit-transform - для Chrome, Safari, Android и iOS
-o-transform - для Opera до версии 12.10
-moz-transform - для Firefox до версии 16.0
2. transform:rotate(x) - вращение объекта
Чтобы вращать элемент существует команда rotate(x). Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример

[html]
<html>
<head>
<style>
.kvadrat1{ // без вращения
width:100px;
height:100px;
background:#444;
margin:30px;
}
.kvadrat1_rotate20deg{ // с вращением на 20 градусов
width:100px;
height:100px;
background:#444;
margin:30px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="kvadrat1"></div>
<div class="kvadrat1_rotate20deg"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.kvadrat1{ // без вращения
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat1_rotate20deg{ // с вращением на 20 градусов
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	}
</style>
</head>
<body>
	<div class="kvadrat1"></div> 
	<div class="kvadrat1_rotate20deg"></div>
</body>
</html>

Примечание
Свойства:

-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);
Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.

Читайте далее по теме http://s9.uploads.ru/t/nOydv.gif

0

2

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

Пример #2. Вращение объекта в html при наведении курсора
Создадим класс kvadrat2 и пропишем для него псевдокласс :hover, в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

Кликни на пример

[html]
<html>
<head>
<style>
.kvadrat2{ // без вращения
width:100px;
height:100px;
background:#444;
margin:30px;
}
.kvadrat2:hover{ // вращение при наведении
width:100px;
height:100px;
background:#888;
margin:30px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="kvadrat2"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.kvadrat2{ // без вращения
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat2:hover{ // вращение при наведении
	width:100px; 
	height:100px; 
	background:#888;
	margin:30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	}
</style>
</head>
<body>
	<div class="kvadrat2"></div> 
</body>
</html>

0

3

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

Кликни на пример

[html]
<html>
<head>
<style>
.kvadrat3{ // без вращения
width:100px;
height:100px;
background:#444;
margin:30px;
transition: all 1s linear; // сглаживание
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
.kvadrat3:hover{ // вращение при наведении
width:100px;
height:100px;
background:#888;
margin:30px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
</style>
</head>
<body>
<div class="kvadrat3"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.kvadrat3{ // без вращения
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	transition: all 1s linear; // сглаживание
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
	.kvadrat3:hover{ // вращение при наведении
	width:100px; 
	height:100px; 
	background:#888;
	margin:30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
</style>
</head>
<body>
	<div class="kvadrat3"></div> 
</body>
</html>

Давольно не плохо да http://s7.uploads.ru/t/m08n9.gif

[good]

0

4

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

4. transform:scale(x,y) - масштабирование объекта

Команда для масштабирования объекта scale(x,y), где аргументы в скобках - масштабирование по осям Х и У соответственно.

Кликни на пример

[html]
<html>
<head>
<style>
.kvadrat5{
width:100px;
height:100px;
background:#444;
margin:30px;
}
.kvadrat5:hover{
width:100px;
height:100px;
background:#444;
margin:30px;
-ms-transform: scale(1.5,1.3);
-webkit-transform: scale(1.5,1.3);
-o-transform: scale(1.5,1.3);
-moz-transform: scale(1.5,1.3);
transform: scale(1.5,1.3);
}
</style>
</head>
<body>
<div class="kvadrat5"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.kvadrat5{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat5:hover{
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: scale(1.5,1.3);
	-webkit-transform: scale(1.5,1.3);
	-o-transform: scale(1.5,1.3);
	-moz-transform: scale(1.5,1.3);
	transform: scale(1.5,1.3);
	}
</style>
</head>
<body>
	<div class="kvadrat5"></div> 
</body>
</html>

[good]

0

5

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

5. transform:skew - наклон объекта

Команда для наклона объекта skew(x,y), где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg.

Кликни на пример

[html]
<html>
<head>
<style>
.kvadrat6{
width:100px;
height:100px;
background:#444;
margin:30px;
}
.kvadrat6:hover{
width:100px;
height:100px;
background:#444;
margin:30px;
-ms-transform: skew(20deg,10deg);
-webkit-transform: skew(20deg,10deg);
-o-transform: skew(20deg,10deg);
-moz-transform: skew(20deg,10deg);
transform: skew(20deg,10deg);
}
</style>
</head>
<body>
<div class="kvadrat6"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.kvadrat6{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat6:hover{
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: skew(20deg,10deg);
	-webkit-transform: skew(20deg,10deg);
	-o-transform: skew(20deg,10deg);
	-moz-transform: skew(20deg,10deg);
	transform: skew(20deg,10deg);
	}
</style>
</head>
<body>
	<div class="kvadrat6"></div> 
</body>
</html>

[good]

0

6

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

А теперь изюминка

Пример #6. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

Кликай пример

[html]
<html>
<head>
<style>
.combo{
width: 100px;
height: 100px;
background: #444;
margin: 30px;
border: 5px solid #222;
transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
}
.combo:hover{
width:100px;
height:100px;
background: #A3423B;
border-radius: 50px;
border: 5px solid #F00;
-ms-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
-webkit-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
-o-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
-moz-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
margin: 30px;
transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
}
</style>
</head>
<body>
<div class="combo"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.combo{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	border: 5px solid #222;
	transition: all 2s ease-in;
	-webkit-transition: all 2s ease-in;
	-o-transition: all 2s ease-in;
	-moz-transition: all 2s ease-in;
	}
	.combo:hover{ 
	width:100px; 
	height:100px; 
	background: #A3423B;
	border-radius: 50px;
	border: 5px solid #F00;
	-ms-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	-webkit-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	-o-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	-moz-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	margin: 30px;
	transition: all 2s ease-in;
	-webkit-transition: all 2s ease-in;
	-o-transition: all 2s ease-in;
	-moz-transition: all 2s ease-in;
}
</style>
</head>
<body>
	<div class="combo"></div> 
</body>
</html>

http://sh.uploads.ru/t/1muZY.gif Круто да http://s7.uploads.ru/t/m08n9.gif

0

7

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

Мы рассмотрели самые основные значения transform. Рассмотрим остальные возможности.

none - отсутствие преобразований (по умолчанию включено оно);
matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
rotateX(x) - 3d вращение по оси X;
rotateY(x) - 3d вращение по оси Y;
rotateZ(x) - 3d вращение по оси Z;
perspective(n) - перспектива для преобразования 3D элемента;
В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация"
[window.]document.getElementById("elementID").style.transform = ""
Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

0

Страница: 1

Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Свойство CSS transform

создать форум