Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

transform CSS

transform  CSS

Доброго времени суток. Первое что мы должны понять это то, что в качестве значений свойства 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)

На этом данная статья подошла к концу и я надеюсь что вы найдете данной информации применение. Удачи!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm