© 2025, Ахматов Максим Сергеевич 20 1
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Был в сети 01.07.2025 15:42
Ахматов Максим Сергеевич
Преподаватель профессиональных дисциплин
3 323
18 029 
Проектирование и дизайн ИС Практическая работа №26
Категория:
Информатика
29.06.2025 17:51
Просмотр содержимого документа
«Проектирование и дизайн ИС Практическая работа №26»
Практическое занятие №26
Тема: Создание 3D анимированной модели iPhone
Цель работы: Создание 3D анимированных моделей
Приобретаемые умения и навыки: Умение работать с СSS
Норма времени: 2 часа.
Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet
В этой практической работе мы рассмотрим способ создания 3D анимированной модели телефона за основу которого пойдет всеми известный iPhone первой модели.
Ход работы
Файл HTML
Мы постараемся создать 3D модель IPhone которая будет вращаться по определенной траектории и также добавим функцию просмотра видео которой можно будет управлять.
Для начала мы займемся HTML файлом:
Сначала мы создадим контейнеры, которые будем в дальнейшем использовать для анимации в нашей модели.
Далее будем создавать контейнеры которые будут отвечать за основу нашего телефона:
Создадим контейнер с id «speaker-front» и в него поместим пустые контейнеры с классом dot !!!(их у нас будет в этом контейнере 72 штуки)
Далее добавим контейнер в который поместим плеер с адресом видео который будет проигрываться в нашем телефоне.
Печатный вариант расположен ниже:
div id="screen"
Далее мы добавим контейнеры которые используем в будущем для создания кнопки «Домой»
Далее мы создадим контейнер 
, он будет большим!!! В него мы расположим следующий код:
И далее в контейнер div class="slab" в котором лежит наш предыдущий код мы поместим контейнер с классом в котором будет находиться контейнер с классом «speaker», в него мы поместим 56 пустых контейнеров с классом dot
Далее мы добавим контейнеры которые будут отвечать за стиль «винтов» на нашем айфоне
Далее мы создадим контейнер 
в который мы поместим 56 контейнеров с классом dot
Далее мы добавим следующий контейнеры, они отвечают за добавление кнопок громкости.
И последний код который мы добавим это:
Внимание!!! Проверьте чтобы все контейнеры div были закрыты!!!
С HTML файлом все! Теперь давайте приступим к оформлению CSS!
Результат HTML файла без CSS стилей будет таким:
Файл CSS
Анимация.
Первое что мы сделаем – займемся анимацией! Давайте сразу зададим траекторию по которой будет вращаться наш смартфон. Скрипт для траектории будет выгладить следующим образом:
После добавления анимации у вас должен получиться такой результат при котором ваш будущий телефон будет вращаться по своей траектории.
Каркас
Дальше мы займемся основной конструкцией телефона. Мы создадим основной каркас телефона.
После ввода скрипта у вал должна отобразиться основа каркаса смартфона
Совет!
Для лучшего удобства вы можете закомментировать в файле HTML тег video чтобы временно отключить видео, которое будет отображаться на смартфоне. Это нужно для того, чтобы следить за созданием и отображением некоторых элементов, которые будут появляться в ходе разработки!
Создание углов смартфона
Теперь давайте создадим углы телефона, чтобы корпус был как единая конструкция
Создание фронтальной панели телефона
Теперь давайте займемся созданием лицевой панели iPhone:
| После добавление данного скрипта, у вас появиться лицевая панель смартфона |
|
Контрольные вопросы:
Какие свойства лучше анимировать для достижения максимальной производительности?
Что делает свойство backface-visibility: hidden; и когда его следует использовать?
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
