<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Создание перспективы в CSS

Создание перспективы в CSS

Здравствуйте! Как известно, эффект перспективы и связанное с ней 3D пространство может сделать интерфейс сайта для конечного пользователя, более удобным и понятным. Возьмем в качестве примера flip переходы или же барабанную прокрутку. Но при этом, сам процесс их создания может немного запутать. И в сегодняшней статье мы рассмотрим два свойства ответственных за данные эффекты. Это - transform и perspective.

Чтобы активировать 3D-пространство, элементу нужна перспектива. Что может быть достигнуто двумя способами.

Первый способ связан со свойством transform, и его функцией perspective():

transform: perspective(400px);

В качестве иллюстрации сказанного создадим простую фигуру:

HTML разметка:


<div class="scene">
  <div class="panel"></div>
</div>

CSS код:


.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 40px;
}

.panel {
  width: 100%;
  height: 100%;
  background: red;
  /* функция perspective  в свойстве transform */
  transform: perspective(600px) rotateY(45deg);
}

Второй метод связан со свойством perspective:


.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 40px;
  /* свойство perspective */
  perspective: 600px;
}

.panel {
  width: 100%;
  height: 100%;
  background: red;
  transform: rotateY(45deg);
}

В обоих случаях мы создали класс scene и класс panel. В первом примере трансформация будет производиться над отдельным элементом, а во втором она затронет все.

Вышеуказанные примеры запускают 3D-пространство и могут дать один и тот же визуальный результат. Но есть разница. Функциональная нотация из первого примера, удобна для непосредственного применения 3D-преобразования к одному элементу. Таким образом, он используется в качестве сокращения для преобразования одного элемента в 3D.


Изображение

Но при использовании на нескольких элементах эффект нарушается. Преобразованные элементы не выстраиваются вместе. Это происходит потому, что каждый элемент имеет свою собственную перспективу, и собственную точку схода. Чтобы исправить это, используйте свойство perspective для родительского элемента .scene, чтобы каждый дочерний элемент мог использовать одно и то же 3D-пространство.

В качестве примера создадим множество элементов:


<div class="scene">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

И применим CSS трансформации:



.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 40px;
}

.panel {
  width: 55px;
  height: 55px;
  float: left; /* данное свойство придает элементам порядок*/
  margin: 5px;
  background: red;
  transform: perspective(400px) rotateY(45deg);
}

Результат:


Изображение

И второй пример:

/* CSS */

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 40px;
  perspective: 400px;
}

.panel {
  width: 55px;
  height: 55px;
  float: left;
  margin: 5px;
  background: blue;
  transform: rotateY(45deg);
}

Как можно заметить, все элементы строго соответствуют перспективе.


Изображение

Таким образом, при построении перспективы и 3D пространства необходимо учитывать данные особенности CSS свойств.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.