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

 

Для начала мы рассмотрим разметку HTML. Калейдоскоп состоит из 12 секторов, расположенных по кругу рядом друг с другом. Каждый сектор представлен треугольником с фоновым изображением, которое сдвигается при перемещении курсора мыши над сектором.

Как вы заметили, разметка является не особо сложной, по этому присмотрим к стилям CSS.

Сектора пронумерованы. Каждый из них поворачивается на свой угол и использует свою матрицу преобразований:

Последним шагом будет оживления при наведении курсора мыши, для этого мы будем использовать

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.