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

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

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

Через некоторое время после этого в обсуждении необходимости в нескольких началах трансформации, записываемых списком, на примере кругового движения элемента, 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

• Смотрите также:
• Создание скошенных углов с использованием CSS3
• Создание игры крестики-нолики с использованием только CSS
• Создание ярлыков в виде марочных билетов с использованием CSS3