Доброго времени суток. Первое что мы должны понять это то, что в качестве значений свойства transform выступают так называемые функции.
Первые функции которые мы с вами рассмотрим будут касаться перемещения элемента.
Допустим у нас есть такой код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Свойство transform</title>
</head>
<body>
<style>
.main{
width:500px;
height:500px;
margin:0 auto;
border:1px solid #f00;
}
</style>
<div class="main">
<span>Текст в центре</span>
</div>
</body>
</html>
и мы хотим переместить наш текст в самый центр и для этого мы воспользуемся функцией translate()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Свойство transform</title>
</head>
<body>
<style>
.main{
width:500px;
height:500px;
margin:0 auto;
border:1px solid #f00;
position:relative;
}
.main span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
<div class="main">
<span>Текст в центре</span>
</div>
</body>
</html>Как видите мы задачу выполнили и наш текст выровнялся по самому центру. Что же мы тут понаделали?! Первое это воспользовались абсолютным позиционированием задав left и top 50% то есть центральную точку блока.
И затем используя функцию translate сместили наш блок относительно себя на половину своей ширины и высоты, благодаря чему, блок span выровнялся точно по центру.
Идем далее и теперь давайте воспользовавшись функцией rotate() повернем наш центральный блок.
transform: rotate(45deg);Мы также можем задавать свойству transform несколько функций сразу, давайте еще допишем функцию деформирования skew
transform: rotate(45deg) skew(20deg ,20deg );и мы получили очень интересную фигуру в виде ромба. deg - угол поворота.
Используя функцию масштабирования scale() мы можем делать очень интересные эффекты, например:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Свойство transform</title>
</head>
<body>
<style>
.circle{
width:40px;
height:40px;
border-radius:100%;
background:green;
float:left;
margin-right:40px;
cursor:pointer;
transition:all 0.2s linear;
}
.circle:hover{
transform:scale(1.2);
}
</style>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</body>
</html>При наведении на шарики происходить изменение их масштаба 1.2. Я думаю подобные эффекты вы не раз выдели. Здесь следует учесть что для плавности изменения мы воспользовались свойством transition.
И так всего у нас получилось четыре функции transition(x, y), rotate(xdeg),skew(xdeg,ydeg) и scale(x)
На этом данная статья подошла к концу и я надеюсь что вы найдете данной информации применение. Удачи!
