Создаём Солнечную систему на чистом CSS3. Часть третья. 3D-преобразования


МКС Онлайн

Модель Солнечной системы в 3D

Предлагаем Вашему вниманию модель Солнечной системы. На данный момент это самая эффектная и красивая модель, созданная на основе 3D технологий. Подобный подход позволяет достигнуть максимальной реалистичности. Модель позволит Вам изучать Солнечную систему так как будто вы смотрите на нее с Земли.

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

Пожалуй, единственным минусом этой модели является то, что она не отражает реальные расстояния планет от Солнца, но зато есть возможность проложить вектор от любой выбранной планеты до другой чтобы узнать расстояние в количестве световых лет между ними. Кроме того, в настройках есть функция, которая позволяет отобразить все созвездия, которые только возможно увидеть под тем или иным углом обзора.
Для начала нажмите кнопку START и подождите пока все загрузится. На автомате должен выставится русский язык. Нужный Вам язык можно поменять в настройках.
Если что-то непонятно, то пишите в комментариях.

Солнечная система 3d онлайн

3d модель солнечной системы позволяет представить движение планет и других объектов в солнечной системе.

Планеты и спутники

Фотографии, простые и увлекательные описания, понятные и взрослым и детям. Интересные факты о планетах солнечной системы.

Карликовые планеты и астероиды

Я не знаю, что здесь можно написать. В общем, в этом разделе сайта есть всякая информация и про солнце, и про карликовые планеты, и про пояса астероидов.

3D-трансформации в CSS

С помощью 3D-трансформаций, появившихся в спецификации CSS3, есть возможность управлять поведением объекта по оси Z. Если говорить буквально, то данная ось расположена перпендикулярно экрану, т. е. по сути она смотрит зрителю в лицо.

Функции 3D-трансформации являются расширенными функциями двухмерных трансформаций, в которые добавлен параметр для оси Z. Этими функциями являются, например, translate3d() , rotate3d() , scale3d() , а также одиночные записи, такие как translateZ() , rotateZ() , scaleZ() .

Функция perspective()

Кроме всего прочего, в CSS3 была добавлена еще одна функция — perspective() , которая может быть использована для создания эффекта перспективы, глубины в сцене. Перемещая элемент по оси Z с установленной перспективой, можно наблюдать, как он приближается или отдаляется от зрителя.

Итак, данная функция задает расстояние между плоскостью экрана и точкой сходимости линий. Масштабирование элемента пропорционально d/(d – Z), где d (значение перспективы) — это расстояние от графической плоскости до предполагаемого положения глаз зрителя:

На схеме показано, как масштабирование зависит от перспективы и значения Z. На верхнем рисунке Z составляет половину d. Для того, чтобы создать впечатление, что исходный круг (который нарисован сплошным контуром) стал ближе к зрителю (круг, нарисованный пунктиром), круг увеличивается в два раза (результат показан в качестве голубого круга). На нижнем рисунке круг уменьшен на одну треть, чтобы создать впечатление, что он отдалился от исходного положения и зрителя.

Без указания перспективы все точки в Z-пространстве сплюснуты в 2D-плоскости, и восприятие глубины будет отсутствовать как таковое. Для некоторых трансформаций, таких как перемещение (translate) по оси Z, функция перспективы играет важную роль, поскольку делает возможным передать визуальный эффект 3D-трансформации.

Ниже показаны примеры того, как выглядят элементы с перспективой и без:

Perspective-origin — точка отсчета

Для перспективы можно изменить точку отсчета при помощи свойства perspective-origin . Оно словно задает точку расположения зрителя при взгляде на перспективу. По умолчанию эта точка находится в центре элемента, но можно определить координаты точки по осям X и Y, из которой наблюдатель будет смотреть на дочерние элементы:

Обратная сторона элемента: backface-visibility

Когда элемент вращается в 3D-пространстве вокруг горизонтальной или вертикальной оси, его обратная сторона по умолчанию видна (visible). При этом содержимое элемента с другой стороны отображается зеркально:

На примере выше правый квадрат повернут по оси Y на 180 градусов. Свойство backface-visibility со значением visible не скрывает содержимое блока, и оно отображается зеркально.

Но если установить для свойства backface-visibility значение hidden , то содержимое элемента будет скрыто с его обратной стороны (включая фон блока). По сути, объект будет невидим на экране, пока он повернут обратной стороной к зрителю.

Но эта возможность может пригодиться, если вам необходимо создать впечатление, что у объекта имеется две стороны. На примере ниже показано, как можно создать игральную карту, используя два фоновых изображения и свойство backface-visibility: hidden . Повернув карту по оси Y на угол более 90 градусов, можно увидеть, как карта развернулась «рубашкой» к зрителю, а лицо карты при этом скрылось:


Эффект двухсторонней игральной карты на CSS3
(кликните по картинке, чтобы увидеть код)

Код HTML для данного примера:

Код CSS для данного примера:

Таковы особенности работы с 3D-пространством в CSS3. Рекомендуем самостоятельно попрактиковаться для лучшего понимания поведения трехмерных элементов. Также не забывайте про префиксы производителей — в реальном проекте их использование обязательно.

В следующем уроке вы узнаете, как заставить объекты плавно переходить от одного состояния к другому. Для этого мы изучим CSS3-свойство transition и все его значения.

Создаём Солнечную систему на чистом CSS3. Часть третья. 3D-преобразования

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Напечатанная на 3D-принтере модель Солнечной системы вращается при малейшем движении руки

Подпишитесь на автора

Подпишитесь на автора, если вам нравятся его публикации. Тогда вы будете получать уведомления о его новых постах.

Отписаться от уведомлений вы всегда сможете в профиле автора.

Когда речь заходит о 3D-печати, в голове сразу возникает целый ряд объектов, которые хочет создать (или уже создал) каждый энтузиаст. Например, объемное сердце от Emmett как вариант подарка на День святого Валентина, мастер Йода и даже древесные лягушки.

Но если вы хотите пойти дальше и сразить наповал всех вокруг возможностями 3D-печати, для этого подойдет подвижный механизм Animaris Geneticu Bellus, который можно приобрести на Shapeways. Он был разработан совместно с голландским художником Тео Янсеном (Theo Jansen), работы которого воистину великолепны: подвижные модели радуют глаз и отзываются на малейшие прикосновения.

На сайте Shapeways дизайнеры написали: «Создавая такие механизмы для печати на 3D-принтере, следует уделять внимание тому, как потом удалять излишки материала, не повредив всю структуру».

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

Мастер Йода рекомендует:  Лучший хакерский курс с Kali Linux на русском языке

Подпишитесь на автора

Подпишитесь на автора, если вам нравятся его публикации. Тогда вы будете получать уведомления о его новых постах.

Отписаться от уведомлений вы всегда сможете в профиле автора.

Функции 3D-трансформации в CSS

Добавьте еще одно измерение к веб-страницам с помощью новых функций 3D-преобразования в CSS. Разберемся с масштабированием, вращением, перспективой, а также проблемами z-index и подводными камнями браузеров.

HTML-элементы могут быть трансформированы в трех направлениях:

  • горизонтальная ось X;
  • вертикальная ось Y;
  • и уходящая вглубь монитора ось Z.


Считается, что поверхность экрана — это начало Z-оси. Объекты с положительными Z-координатами будут выдвигаться ближе к пользователю, а с отрицательными — перемещаться вдаль. При добавлении перспективы слой с большим отрицательным Z-значением может полностью пропасть.

Следует отметить несколько моментов:

  1. CSS может только преобразовать двумерные элементы HTML в трехмерном пространстве. Сами элементы остаются плоскими и имеют нулевую глубину. Масштабирование в z-плоскости не сделает из квадрата куб. В принципе, вы можете создать полноценный куб, но для этого потребуется шесть элементов: по одному для каждой стороны.
  2. 3D-преобразования отлично подходят для создания эффектов страницы, но вряд ли позволят создать следующий MineCraft или Call of Duty. Сложные модели лучше реализовать с использованием WebGL.

3D преобразования хорошо поддерживаются во всех современных браузерах (включая IE10+) с некоторыми исключениями:

  • Internet Explorer не поддерживает transform-style: preserve-3d , что делает невозможным создание 3D сцен.
  • Все версии Safari должны использовать префикс -webkit-backface-visibility для скрытия задних граней. Все остальные браузеры поддерживают свойство backface-visibility .

На примере вы можете увидеть, как работают CSS-трансформации, которые будут разобраны ниже:

transform

К любому элементу можно применить свойство transform . Оно принимает функцию с одним или несколькими параметрами. Например:

Моделирование солнечной системы из 3-х планет

Написал прогу. Смысл её, это моделирование солнечной системы из 3-х планет.Вот код..
Собственно пробовал, но не получается реализовать хоть какое-то подобие системы..(т.е. одна точка это солнце , две другие это земля и луна).
П.С. Заранее спасибо за помощь.

12.04.2012, 17:04

Программа-симулятор солнечной системы 3D: на чем ее писать
Получил задание курсовой работы: «Программа-симулятор солнечной системы». Преподаватель сказал, что.

Клиент-серверное приложение модель солнечной системы
Добрый день, мне дали задание написать клиент-серверное приложение сервер(ядро) должно быт написано.

Моделирование системы Автопарк.
Спроектировать набор классов для моделирования системы Автопарк. Автопарк осуществляет .

Конфигурация планет Солнечной системы
Добрый день! Помогите, пожалуйста, найти информацию. Значится, сейчас пишу модель Солнечной.

Солнечная система — 3D модель

SOLAR SYSTEM AND NIGHT SKY — создана на основе 3D модели планет Солнечной системы и ночного неба.

Модель позволяет вам наблюдать за ближайшими астрономическими объектами. Дети могут развивать свои знания и представления о вселенной. Самые младшие посетители это дети, которым всего 7-8 лет. Не смотря на это, многие учителя используют эту модель в качестве практического источника, способного показать и объяснить события в нашей Солнечной системе.

Solar System Scope — это модель Солнечной системы, ночного неба и космического пространства в реальном времени, с точными позициями объектов и множеством интересных фактов.

Модель состоит из 3 основных просмотров (Гелиоцентрическая, Геоцентрическая и Panaromatic), в том числе:

  • точное положение всех небесных объектов в соответствии с NASA расчетами
  • схематические расстояния и размеры для лучшего понимания поверхностей планеты и движений
  • уникальная особенность, чтобы протащить планеты через их орбиты
  • много интересных настроек, которые позволяют соблюдать движения и события
  • калькулятор для измерения расстояния между планетами, даже во время движения
  • много интересных установок, которые позволяют вам наблюдать специфические движения и события

Интерактивная 2D и 3D модель Солнечной системы

Космос онлайн > Интерактивная 2D и 3D модель Солнечной системы


Рассмотрите 2D и 3D модель Солнечной системы: реальные расстояния между планетами, подвижная карта, фазы Луны, системы Коперника и Тихо Браге, инструкция.

FLASH Модель Солнечной системы

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

Управление флеш-моделью простое: в левой верхней половине экрана находится рычажок регулировки скорости вращения планет, с помощью которого можно выставить даже отрицательную её величину. Немного ниже располагается ссылка на помощь – HELP. В модели хорошо реализована подсветка важных моментов устройства Солнечной системы, на которых пользователю стоит обратить внимание в процессе работы с нею, например, планеты выделены здесь различными цветами. Кроме того, если вам предстоит длительный исследовательский процесс, то вы можете включить музыкальное сопровождение, которое прекрасно дополнит впечатление от величия Вселенной.

В левой нижней части экрана расположены пункты меню с фазами Луны, что позволяет наглядно представить их взаимосвязь с иными процессами, происходящими в Солнечной системе.

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

Нижняя правая часть экрана занята переключателем между астрономическими системами Коперника и Тихо Браге. В гелиоцентрической модели мира, созданной Коперником, её центром изображено Солнце с вращающимися вокруг неё планетами. Система же датского астролога и астронома Тихо Браге, который жил в 16 веке, является менее известной, но она более удобна для осуществления астрологических вычислений.

В центре экрана расположен вращающийся круг, по периметру которого размещён ещё один элемент управления моделью, исполнен он в виде треугольника. Если пользователь потянет этот треугольник, то у него появится возможность выставить необходимое для изучения модели время. Хотя работая с этой моделью вы и не получите максимально точных размеров и расстояний в Солнечной системе, но зато она очень удобна управляется и максимально наглядна.

Если модель не помещается в экран вашего монитора, вы можете уменьшить её, одновременно нажав клавиши «Ctrl» и «Минус».

Модель Солнечной системы с реальными расстояниями между планетами

Этот вариант модели Солнечной системы создан без учёта верований древних, то есть её система координат абсолютная. Расстояния здесь указанна максимально наглядно и реалистично, а вот пропорции планет переданы неверно, хотя она так же имеет право на существование. Дело в том, что в ней расстояние от земного наблюдателя до центра Солнечной системы меняется в диапазоне от 20 до 1 300 млн. километров и если вы будете постепенно изменять её в процессе изучения, вы более наглядно представите масштаб расстояний между планетами в нашей звёздной системе. А для того, что бы лучше понять относительность времени предусмотрен переключатель шага времени, размер которого составляет день, месяц или год.

Мастер Йода рекомендует:  Функциональное программирование с примерами на JavaScript. Часть вторая. Аппликативные функторы,

3D модель Солнечной системы

Это самая впечатляющая модель Солнечной системы из представленных на странице, так как создана с помощью 3D технологий полностью реалистична. С её помощью можно изучать Солнечную систему, а так же созвездия, как схематично, так и в объёмном изображении. Здесь реализована возможность изучать строение Солнечной системы глядя с Земли, что позволит вам совершить вам приближённое к реальности увлекательное путешествие в космические миры.

Трёхмерные преобразования CSS3

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

Но возможности CSS3 не исчерпываются двумерными преобразованиями. Новый стандарт языка оформления веб-страниц также позволяет нам выполнять над элементами трёхмерные преобразования, выполняемые в воображаемом пространстве. Так что наши возможности по оформлению страниц заметно возрастают.

В отличие от двумерных, трёхмерные преобразования поддерживаются Internet Explorer, начиная лишь с версии 10. Двумерные преобразования, как мы помним из предыдущей статьи, поддерживались и его предыдущей версией. Это обязательно нужно иметь в виду.

1. Необходимые основы
Трёхмерные преобразования и их параметры указываются с применением особых атрибутов стиля CSS3. Internet Explorer 10 поддерживает эти атрибуты стиля в том виде, в котором они определены в стандартах W3C . Остальные браузеры, имеющие поддержку этих преобразований, используют для их задания расширения, которые получаются добавлением к наименованию атрибута стиля спереди префикса браузера. Все эти префиксы были рассмотрены нами в конце предыдущей статьи.

К двум знакомым нам координатным осям — горизонтальной (x) и вертикальной (y) — добавляется ещё одна. Это ось z, которая направлена из точки начала координат перпендикулярно воображаемой поверхности элемента. Положительные значения координаты по этой оси отсчитываются в направлении к посетителю, отрицательные — от посетителя.

Все трёхмерные преобразования элементов веб-страницы выполняются в ортогональной проекции на поверхность их родителя — элемента, в который они вложены.

Отметим ещё одну важную вещь. Каждое трёхмерное преобразование применяется исключительно к тому элементу, для которого оно задано; остальные элементы ей не затрагиваются. Так, если мы попытаемся переместить какой-либо из элементов визуально ниже других, указав отрицательное значение смещение по оси z, то не сможем этого сделать — порядком, в котором элементы перекрывают друг друга, будет управлять либо браузер (в случае непозиционируемых элементов), либо атрибут стиля z-index (в случае элементов позиционируемых), но никак не преобразование смещения.

Трёхмерные преобразования подчиняются тем же правилам, что и двумерные. Так, для указания их параметров применяются те же самые единицы измерения; они могут комбинироваться для создания сложных преобразований; наконец, точку начала координат в их случае также можно сместить в любое место элемента веб-страницы и даже вне его.

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

Перспектива (её также называют глубиной перспективы) в CSS3 — это расстояние, отсчитываемое по оси z, между воображаемым наблюдателем и поверхностью родителя элемента, над которым выполняется преобразование. Фактически перспектива добавляет трёхмерному изображению «глубину», благодаря чему мы получим на веб-странице тот эффект, которого собираемся добиться, применяя трёхмерное преобразование.

Итак, нам нужно создать перспективу. Как это сделать?

С помощью атрибута стиля perspective. В нём указывается значение перспективы, заданное в относительных единицах измерения CSS; к таким единицам относятся пикселы, проценты и величины, вычисляемые относительно размера шрифта или размеров клиентской области окна браузера. Абсолютные единицы измерения — миллиметры, сантиметры, дюймы, пункты и пики — не поддерживаются. Единицы измерения, поддерживаемые CSS, описывались в параграфе 2.3 предыдущей статьи.

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


Задаём перспективу в 300 пикселов для всех элементов, что вложены в тег .

Чтобы убрать перспективу, достаточно указать для атрибута стиля perspective значение none. Это, кстати, его значение по умолчанию.

3. Выполнение преобразований
Теперь рассмотрим, как, собственно, выполняются трёхмерные преобразования CSS3.

3.1. Смещение
Смещение элемента по оси z проще всего выполнить с помощью функции translateZ. В качестве единственного параметра она принимает величину смещения.

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

Как и в предыдущей статье, мы создали три свободно позиционируемых блока, поместили их друг на друге и окрасили, соответственно, в жёлтый, красный и синий цвета. Красный блок мы сместили на 100 пикселов по направлению к посетителю, а синий — на те же 100 пикселов, но по направлению от посетителя. Наконец, для родителя всех этих блоков — тега — мы задали перспективу в 300 пикселов.

Результат всего этого мы можем видеть на рис. 1. Видно, что красный блок заметно увеличился в размерах, «приблизившись» к посетителю. Синий же блок, наоборот, «отдалился» от посетителя и визуально стал меньше.

Отметим, что синий блок, хоть и оказался смещённым «дальше» от посетителя, но всё же перекрыл и жёлтый, и красный, хотя, по идее, должен был располагаться под ними. Это случилось потому, данный блок был определён в HTML-коде последним и, следовательно, будет располагаться выше остальных блоков. А трёхмерные преобразования, как мы уже знаем, затрагивают только те элементы, к которым непосредственно применены, не затрагивая всех их «соседей».

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

После этого блоки будут расположены так, как показано на рис. 2.

Часто бывает необходимо сместить элемент веб-страницы одновременно по всем трём координатным осям. В этом случае нам поможет функция translate3d. Формат её вызова таков:

gt;,

)[/code]
Все три величины смещения указываются в виде чисел.

[code]body <
perspective: 300px;
>
#div1, #div2, #div3 <
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height: 100px;
>
#div1 <
background-color: yellow;
z-index: 2;
>
#div2 <
background-color: red;
transform: translate3d(0px, 0px, 100px);
z-index: 3;
>
#div3 <
background-color: blue;
transform: translate3d(0px, 0px, -100px);
z-index: 1;
>
. . .

[/code]
Здесь мы переписали приведённый выше пример с применением функции transform3d. Хотя, конечно, в таком случае использовать функцию translate3d излишне — хватит функции translateZ.

3.2. Поворот
Для поворота элемента вокруг одной из координатных осей применяются функции rotateX, rotateY и rotateZ. Они выполняют поворот вдоль осей x, y и z соответственно.

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

Мастер Йода рекомендует:  Создаем 3D – текст с эффектом в виде цветов

[code]body <
perspective: 300px;
>
#div1, #div2, #div3 <
position: absolute;
top: 100px;
width: 100px;
height: 100px;
>
#div1 <
left: 400px;
background-color: yellow;
transform: rotateZ(45deg);
>
#div2 <
left: 200px;
background-color: red;
transform: rotateX(45deg);
>
#div3 <
left: 600px;
background-color: blue;
color: white;
transform: rotateY(-45deg);
>
. . .

[/code]
Здесь мы расположили блоки в ряд и поместили в них фрагменты текста — так они будут выглядеть эффектнее; для синего блока мы дополнительно указали белый цвет текста, так как чёрный текст на синем фоне будет плохо заметен. Жёлтый блок мы повернули на 45 градусов по часовой стрелке по оси z, красный блок — на 45 градусов по часовой стрелке по горизонтальной оси, а синий — на 45 градусов против часовой стрелки по вертикальной оси. Результат всех этих преобразований можно увидеть на рис. 3.

Интересная вещь — текст, что мы поместили в блоки, даже после любых преобразований остаётся текстом; его можно выделить и скопировать, а если в этот текст вставить гиперссылку, то на ней можно будет щёлкнуть, и она сработает.

3.3. Масштабирование
Масштабировать какой-либо элемент по оси z имеет смысл только в том случае, если перед масштабированием к нему было применено преобразование поворота вокруг оси x или y. В противном случае визуально данный элемент никак не изменится.

Масштабирование по оси z выполняет функция scaleZ. В качестве единственного её параметра указывается значение масштаба. Значения, большие 1, задают увеличение масштаба, а значения, меньшие 1, — уменьшение.

[code]body <
perspective: 300px;
>
#div1, #div2, #div3 <
position: absolute;
top: 100px;
width: 100px;
height: 100px;
>
#div1 <
left: 400px;
background-color: yellow;
>
#div2 <
left: 200px;
background-color: red;
transform: rotateY(30deg);
>
#div3 <
left: 600px;
background-color: blue;
color: white;
transform: scaleZ(3.0) rotateY(30deg);
>
. . .

[/code]
Здесь мы повернули красный блок на 30 градусов по вертикальной оси по часовой стрелке, а синий перед поворотом на тот же угол увеличили по оси z втрое. То, что у нас получилось, показано на рис. 4.

А функция scale3d позволит нам выполнить масштабирование сразу по трём координатным осям. Формат её вызова следующий:

[code]scale3d(
,
,

)[/code]
Все три величины масштаба задаются в виде чисел.

[code]body <
perspective: 300px;
>
#div1, #div2, #div3 <
position: absolute;
top: 100px;
width: 100px;
height: 100px;
>
#div1 <
left: 400px;
background-color: yellow;
>
#div2 <
left: 200px;
background-color: red;
transform: scale3d(1.5, 0.2, 1.0) rotateY(30deg);
>
#div3 <
left: 600px;
background-color: blue;
color: white;
transform: scale3d(2.0, 1.0, 3.0) rotateY(30deg);
>
. . .


[/code]
Красный блок мы перед поворотом увеличили в полтора раза по горизонтали и уменьшили впятеро по вертикали. Синий блок мы перед поворотом увеличили вдвое по горизонтали и утроили масштаб по оси z. Результат, как говорится, налицо — см. рис. 5.

4. Точка зрения и её местоположение
Мы уже знаем, что перед выполнением трёхмерных преобразований необходимо указать перспективу; в противном случае мы можем не получить тот результат, на который рассчитывали, а в некоторых случаях не получим вообще никакого видимого результата. Также мы знаем, что перспектива в CSS3 — это расстояние между наблюдателем и плоскостью родителя элемента, над которым выполняется преобразование.

Но где находится этот наблюдатель?

В особой точке, носящей название точки зрения. Именно эту точку браузер имеет в виду, когда рассчитывает проекцию преобразуемого элемента на двумерную плоскость его родителя.

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

Для иллюстрации этого рассмотрим следующий код:

[code]body <
perspective: 300px;
>
#div1, #div2, #div3 <
position: absolute;
left: 200px;
top: 100px;
width: 100px;
height: 100px;
>
#div1 <
background-color: yellow;
>
#div2 <
background-color: red;
transform: translateX(200px) rotateY(30deg);
>
#div3 <
background-color: blue;
color: white;
transform: translateX(400px) rotateY(30deg);
>
. . .

[/code]
Жёлтый блок мы оставили без изменений, красный сместили на 200 пикселов вправо и повернули на 30 градусов по вертикальной оси по часовой стрелке, а синий сместили на 400 пикселов вправо и повернули на тот же угол по той же оси. Получившийся у нас результат показан на рис. 6.

Синий блок выглядит повёрнутым на больший угол, нежели красный (что на самом деле не так). Это потому, что мы фактически смотрим на него под большим углом.

В случае возникновения необходимости мы можем сместить точку зрения в другое место родителя. Для этого мы используем атрибут стиля perspective-origin.

[code]perspective-origin: [ ][/code]
Первое указанное значение задаёт горизонтальную координату точки зрения. Она может представлять собой как число в любой из поддерживаемой CSS единиц измерения (см. параграф 2.3 предыдущей статьи), так и одно из предопределённых значений left (левая граница родителя), center (центр родителя) или right (правая граница).

Второе значение устанавливает вертикальную координату точки. Её также можно указать числом или одним из предопределённых значений top (верхняя граница родителя), center (центр родителя) и bottom (нижняя граница). Если второе значение не указано, точка зрения будет расположена по центру родителя (словно было задано значение center).

Атрибут стиля perspective-origin, как и атрибут стиля perspective, указывается для родителя элементов, к которым будут применены трёхмерные преобразования. Его имеет смысл указывать только вместе с атрибутом стиля perspective; в противном случае он не будет иметь силы.

Значение данного атрибута стиля по умолчанию — center center.

Давайте для предыдущего примера сместим точку зрения в правый верхний угол родителя, добавив вот такой стиль:

[code]body <
perspective-origin: right top;
>[/code]
Изображение, выдаваемое браузером, сразу изменится — см. рис. 7.

5. Скрытие обратной стороны элемента
Давайте рассмотрим вот такой небольшой код:

[code]body <
perspective: 300px;
>
#div1 <
position: absolute;
left: 200px;
top: 100px;
width: 100px;
height: 100px;
background-color: blue;
color: white;
transform: rotateY(175deg);
>
. . .

[/code]
Он создаёт блок и поворачивает его по вертикальной оси на 175 градусов по часовой стрелке. В результате блок окажется «перевёрнутым», и мы увидим его «обратную» сторону (рис. 8).

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

Для чего мы воспользуемся атрибутом стиля backface-visibility, который укажем непосредственно для элемента, к которому применяется преобразование.

[code]backface-visibility: visible | hidden[/code]
Значение visible делает «обратную» сторону элемента видимой; это значение по умолчанию. Значение hidden, напротив, скрывает элемент, если он оказался повёрнутым к посетителю своей «обратной» стороной.

Добавим в приведённый выше пример вот такой стиль:

[code]#div1 <
backface-visibility: hidden;
>[/code]
В ответ браузер не покажет вообще ничего. Что и понятно — поскольку элемент оказался повёрнут к посетителю «обратной» стороной, он будет скрыт.

6. Заключение
В этой статье рассматривались трёхмерные преобразования CSS3. Мы научились смещать, поворачивать и масштабировать элементы веб-страниц в трёхмерном пространстве, задавать для них перспективу и даже скрывать элементы, которые в результате преобразований оказались повёрнуты к посетителю своей «обратной» стороной.

В следующей статье мы начнём рассмотрение анимации CSS3.

Дополнительные материалы

Добавить комментарий