Функции трансформации: translate: пример

225.47K

Category:

programming

CSS-трансформации

1. CSS-трансформации

CSS-трансформации

2. transform

• Трансформирует элемент, в частности, позволяет его
масштабировать, вращать, сдвигать, наклонять, а также
комбинировать виды трансформаций
• Синтаксис
transform: <функция>

3. Функции трансформации: translate

• Сдвигает элемент на заданное значение по горизонтали и
вертикали
• Синтаксис
transform: translate(x, y)

4. Функции трансформации: translate: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:lightblue;
}
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px);
}
</style>
</head>
<body>
<div>
Метод translate() перемещает
тэг div вправо на 50 пикселей,
и на 100 пикселей вниз.
</div>
</body>
</html>

5. Функции трансформации: translate: пример

6. Функции трансформации: rotate

• Поворот элемента на заданный угол
• Синтаксис
transform: rotate(угол)

7. Функции трансформации: rotate: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:lightblue;}
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Обычный элемент div
</div>
<div id="myDiv">
Метод rotate() поворачивает
элемент div на 20 градусов по
часовой стрелке
</div>
</body>
</html>

8. Функции трансформации: rotate: пример

9. Функции трансформации: rotate: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:lightblue; }
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv{
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Обычный элемент div
</div>
<div id="myDiv">
Метод rotate() поворачивает
элемент div на 20 градусов
против часовой стрелки
</div>
</body>
</html>

10. Функции трансформации: rotate: пример

11. Функции трансформации: scale

• Масштаб элемента по горизонтали и вертикали
• Синтаксис
transform: scale(x,y);

12. Функции трансформации: scale: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:#80CBC4; }
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2,3);
}
</style>
</head>
<body>
<div>
Этот элемент увеличен в 2
раза по ширине и в 3 раза
по высоте.
</div>
</body>
</html>

13. Функции трансформации: scale: пример

14. Функции трансформации: scale: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:#B2EBF2; }
div {
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div>
This div element is
decreased to be half of its
original width and height.
</div>
</body>
</html>

15. Функции трансформации: scale: пример

16. Функции трансформации: skewX

• Наклоняет элемент на заданный угол по вертикали
• Синтаксис
transform: skewX(угол)

17. Функции трансформации: skewX: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:#B2EBF2; }
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Обычный div
</div>
<div id="myDiv">
This div element is skewed 20
degrees along the X-axis.
</div>
</body>
</html>

18. Функции трансформации: skewX: пример

19. Функции трансформации: skewY

• Наклоняет элемент на заданный угол по горизонтали
• Синтаксис
transform: skew(y-угол)

20. Функции трансформации: skewY: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:#B2EBF2; }
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 20
degrees along the Y-axis.
</div>
</body>
</html>

21. Функции трансформации: skewY: пример

22. Функции трансформации: skew

• Используется для наклона (искажения) элемента относительно
координатных осей
• Если указано одно значение, второе будет определено браузером
автоматически
• Синтаксис
transform: skew(x-угол,y-угол)

23. Функции трансформации: skew: пример

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:#B2EBF2; }
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skew(20deg,10deg);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 20
degrees along the X-axis, and 10
degrees along the Y-axis.
</div>
</body>
</html>

24. Функции трансформации: skew: пример

25. Домашнее задание

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

26. Домашнее задание

Используйте код на 25 слайде
1. С помощью свойства transform переместите элемент <div> на
100px вправо и на 200px вниз
2. С помощью свойства transform поверните элемент <div> на 45
градусов
3. С помощью свойства transform измените размер <div>:
уменьшите ширину в 2 раза и увеличьте высоту в 3 раза
4. С помощью свойства transform:skew наклоните элемент <div> на
20 градусов по оси X и на 30 градусов по оси Y

English Русский Rules