Живой экран ноутбука при помощи Matrix3D
Cегодня мы бы хотели показать забавный прием, а именно, как при помощи трансформаций Matrix3D в CSS3 вы можете оживить изображение, например, какого-то мокапа. У нас будет изображение ноутбука, экран которого мы заменим на отображение, к примеру нашего сайта. При загрузке страницы будет подгружаться и актуальная версия сайта для отображение в окне ноутбука. При этом пользователь может полностью взаимодействовать и переходить по указанному ресурсе. Такой прием служит более как развлекательный но вы можете найти применение.
Вы можете использовать такой прием, к примеру, к заглушке своего сайта, или какой-нибудь развлекательной странице, это может помочь не потерять пользователя. Смотрите также бесплатные шаблоны от наших партнеров:
Шаг 1. HTML
Разметка будет достаточно простая, так как всю работу у нас выполняет CSS3, нам необходимо создать фрейм, а также присвоить атрибут sandbox:
1 2 3 4 5 |
<div class="laptop"> <div class="screen-overlay"> <iframe src="сайт" class="live-view" sandbox="allow-scripts allow-same-origin allow-pointer-lock"></iframe> </div> </div> |
Атрибут sandbox позволяет установить ряд ограничений на контент загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.
Шаг 2. CSS
Чтобы получить такой эффект, картинка в картинке, нам необходимо повернуть наш фрейм по плоскостям, тут в работу и вступает Matrix3D:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.screen-overlay { width: 600px; height: 500px; background-color: #191919; /* Трансформация фрейма для экрана */ transform: matrix3d(1.11008, 0.108202, 0, 0.000394192, 0.224001, 0.803852, 0, -8.80428e-05, 0, 0, 1, 0, 40, 34, 0, 1); transform-origin: 0 0 0; } .live-view { width: 200%; height: 200%; transform: scale(0.5); transform-origin: top left; /* Запретить взаимодействие пользователя с содержимым iframe */ } |
На первый взгляд кажется, что реализовать такой прием сложно, но это не так. Попробуйте, если у вас не получилось, дайте мне знать в комментариях.
Вот и все. Готово!
Опубликовал Cooper 22.06.2018 в 10:15, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |