Cегодня мы бы хотели показать забавный прием, а именно, как при помощи трансформаций Matrix3D в CSS3 вы можете оживить изображение, например, какого-то мокапа. У нас будет изображение ноутбука, экран которого мы заменим на отображение, к примеру нашего сайта. При загрузке страницы будет подгружаться и актуальная версия сайта для отображение в окне ноутбука. При этом пользователь может полностью взаимодействовать и переходить по указанному ресурсе. Такой прием служит более как развлекательный но вы можете найти применение.

 

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

Шаг 1. HTML

Разметка будет достаточно простая, так как всю работу у нас выполняет CSS3, нам необходимо создать фрейм, а также присвоить атрибут sandbox:

Атрибут sandbox позволяет установить ряд ограничений на контент загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.

Шаг 2. CSS

Чтобы получить такой эффект, картинка в картинке, нам необходимо повернуть наш фрейм по плоскостям, тут в работу и вступает Matrix3D:

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

Вот и все. Готово!