Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание кругового движения элемента

9 января 2016 | Опубликовано в css | 2 Комментариев »

Некоторое время назад мы задумались, как можно создать круговое движение элемента без поворота самого элемента. Этого можно добиться разными путями, например, с помощью большого количества ключевых кадров для разных положений элемента на окружности, но нам хотелось найти наиболее простой способ.

 

 


Сначала мы нашли первое решение. К сожалению, для него требуется дополнительный оборачивающий блок. Идея была в использовании двух поворачивающих трансформация с разными началами и противоположными углами, которые бы отменяли поворот элемента в каждый момент времени. Первое начало трансформации было бы в центре круга, по которому должен двигаться элемент, и второй центр трансформации был бы в центре элемента. Так как нельзя использовать несколько начал трансформации, был нужен оборачивающий элемент.

Хотя это решение и лучше, мы не были полностью довольны им из-за необходимости в дополнительном элементе. Так что мы продолжили искать другие варианты.

Через некоторое время после этого в обсуждении необходимости в нескольких началах трансформации, записываемых списком, на примере кругового движения элемента, Aryeh Gregor предложил отличную идею, показывающую, что и сейчас уже возможно создание такого эффекта с помощью последовательных трансформаций переноса между поворотами в противоположные стороны.

Мы немного упростили код, и получили следующий результат:

Демонстрация работы

Код HTML

<div></div>

Код CSS

/** * Круговое движение без оборачивающих элементов * Идея Aryeh Gregor, упрощено Lea Verou */

@keyframes rot {
        from {
                transform: rotate(0deg)
                           translate(-150px)
                           rotate(0deg);
        }
        to {
                transform: rotate(360deg)
                           translate(-150px)
                           rotate(-360deg);
        }
}
.smile {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 200px;
        left: 50%;
        margin: -20px;
        font-size: 100px;
        animation: rot 3s infinite linear;
}

Не похоже, что движение элемента по кругу можно сделать еще проще.

Автор урока Lea Verou




Комментарии

  1. Николай Томин
    Thumb up Thumb down 0

    На своём сайте часть изображений сделал вращающимися. А вот в интернете они отображаются неподвижными. Возможно я чего-то недоделал. Кто знает причину?

    Возможно кому-нибудь будет полезно следующее:

    <?php

    echo "(x+y) 2 = x2 + 2xy + y2";

    ?>

    Отобразится как возведение двучлена в степень 2.

    Ответить

    Николай Томин Ответ:

    Thumb up Thumb down 0

    Мой текст комментария от 7 февраля 2019 в 9:13 был несколько иного содержания. В результате получилось что-то невразумительное. Причины не понимаю.

    Ответить

Оставить ответ


5 − два =

Вставить изображение