Вы здесь: Главная > IT management > Ремонт и обслуживание PC > Материалы на Русском языке > CSS > CSS3 2D transforms
WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
Дополнительные материалы
- API WEB - уведомлений (Notifications)
- CSS - шрифты
- CSS3 адаптивные блоки (Flex Box Model)
- HTML5 - элемент CANVAS, рисование
- HTML5 семантические элементы
- Joomla, компонент Sourcerer
- Visual Studio Code для HTML, CSS, SASS, JavaScript
- WordPress - дочерние темы
- Вставка видео в HTML документ
- Построение многоязычных сайтов на CMS WordPress
- Создание шаблонов для Joomla 3.x
Ремонт и обслуживание PC
CSS 2D transforms
Трансформации в CSS позволяют перемещать, поворачивать, масштабировать и деформировать элементы.
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrix()
Примеры:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS transform</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="skewX">skewX</div>
<div class="translateX">translateX</div>
</body>
</html>
div {
min-width: 100px;
font-size: 2rem;
background-color: orange;
padding: 50px;
margin: 50px;
text-align: center;
transition: transform 500ms linear;
color: #FFF;
}
div:hover {
background-color: rgba(255, 166, 0, 0.582);
}
.rotate:hover {
transform: rotate(0.01turn);
}
.scale:hover {
transform: scale(1.5, 1);
}
.skewX:hover {
transform: skewX(-10deg);
}
.translateX:hover {
transform: translateX(10px);
}