Содержание

свойство трансформации — учебник CSS

Свойство transform, внедренное в спецификации CSS3, позволяет преобразовывать (трансформировать) элементы веб-страницы несколькими способами. Среди значений, которые поддерживаются свойством, есть функции вращения, масштабирования, перемещения, наклона, а также трехмерные функции со своими специфическими особенностями. Каждое значение будет рассмотрено на отдельных страницах далее.

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

Поведение элементов

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

Кроссбраузерность

Internet Explorer вплоть до 8-й версии не поддерживает трансформацию элементов. Для обеспечения корректной работы в других браузерах свойство CSS3 transform требует использования вендорных префиксов:

  • -ms-transform — для Internet Explorer 9;
  • -webkit-transform — для Chrome 35 и ранее, Safari до версии 8 включительно, Opera с версии 15 до 22, Android 4.4.4 и ранее, iOS Safari до версии 8.4 включительно;
  • -o-transform — для браузера Opera 11.5;
  • -moz-transform — для Firefox до версии 15 включительно.

В следующих частях урока, посвященного свойству transform, мы познакомимся со значениями, которые оно принимает. И начнем мы с функции вращения rotate().

раздельные функции CSS-трансформации — CSS-LIVE

Перевод статьи  A Trick: Individual CSS Transform Functions с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона.

Одно лишь свойство transform в CSS дает нам массу возможностей — можно вращать, сдвигать, масштабировать и не только, и всё это сразу. Но в том, что эти разные функции трансформации входят в одно свойство, таится ловушка.

Часто бывает нужно применять разные трансформации для разных состояний элемента. Скажем, у нас есть кнопка, которая всегда будет смещена по вертикали на -150%. Когда пользователь наводит на нее мышкой, мы ее чуть уменьшим, а при нажатии (в активном состоянии) перевернем на 180 градусов. В этом примере для кнопки «My Button» приведен CSS-код, который первым приходит на ум по такому описанию, а кнопка «Expected» показывает, как добиться описанного поведения на самом деле.

See the Pen Basics with Transform Functions by Dan Wilson (@danwilson) on CodePen.

При наведении мы не просто добавляем масштаб к начальному состоянию кнопки… мы еще и переопределяем исходный сдвиг, так что она масштабируется и возвращается к translateY(0).

Почему так? Из-за линейной алгебры. То, как происходят эти трансформации, зависит от других трансформаций и их порядка (так что translate(-50%, -50%) scale(.4) rotate(50deg) — не то же самое, что rotate(50deg) translate(-50%, -50%) scale(.4)

), в сухом остатке там умножение матриц. Но обычно нам не надо знать настолько глубокие «внутренности» трансформаций. Обычно веб-разработчики просто хотят знать, как управлять этими функциями трансформации по отдельности.

See the Pen Order of Transform Functions by Dan Wilson (@danwilson) on CodePen.

Chrome начал реализовывать отдельные свойства, так что translate, rotate, and scale стали полноправными свойствами, как видно в предыдущем примере (на момент публикации требует Chrome Canary). Но у этого есть свои ограничения:

  • Отдельные x-, y‑ и z-компоненты каждого из них по-прежнему привязаны к единому свойству.
  • Преобразуются в матрицы они всегда в одном порядке: translate scale rotate.
  • В ближайшее время — только в Chrome Canary.

Так что же делать?

Использовать CSS-переменные.

Когда я слушал доклад Дэвида Хуршида о CSS-переменых, моим глазам вдруг открылась масса возможностей для применения их в анимации. А когда я начал совать переменные куда только можно, их мощь стала еще яснее. Без дальнейших церемоний… вот трюк, который даст нам больше гибкости (все «как», «что» и «почему» — сразу после примера).

See the Pen CSS Variables + Transform = Individual Properties (with Inputs) by Dan Wilson (@danwilson) on CodePen.

Мы задаем ключевой начальный transform нашему элементу с помощью всех переменных, которые мы собираемся менять. Модифицируя значение переменной для другого состояния, мы можем получить CSS-правило, более похожее на наш первоначальный код, но с гораздо большей гибкостью при усложнении. В этом примере мы обрабатываем намного больше наших первоначальных трех состояний, подключив к делу JavaScript (но это не обязательно: вот версия нашего первого примера с кнопкой на одном CSS). Фактически, тут по-прежнему определено одно CSS-свойство, и мы меняем только одну функцию трансформации за раз (без разницы, в JS или в CSS).

Без CSS-переменных мы бы не обошлись без расчетов (причем далеко не всегда тривиальных) для текущего перехода при изменении каждой функции трансформации. Тогда мы могли бы узнать текущее значение каждой из двух других функций, чтобы убедиться, что переход останется плавным.

Чем это лучше будущих отдельных свойств из Chrome Canary?

  • Можно как угодно комбинировать x, y и z, поскольку мы сами решаем, как задать
    transform
    изначально.
  • Аналогично, мы можем задавать какой нам угодно порядок функций трансформации (хотя и теряем не столь часто нужную, наверное, возможность менять этот порядок от одного состояния к другому).
  • Я проверил, что это хорошо работает в новейшем Chrome (56), Firefox (50) и Safari (только в Technical Preview — Safari 10 поддерживает переменные, но без плавных переходов). Я пока не смог проверить в Edge Insider Preview (первой версии, которая поддерживает CSS-переменные) — так что, пожалуйста, сообщите, если у вас будут новости с того фронта.

И, пожалуйста, сообщите, если у вас есть креативное применение для этого приема.

P.S. Это тоже может быть интересно:

Transform • Про CSS

CSS-свойство transform позволяет трансформировать элементы, в том числе в трехмерном пространстве.

Спецификация: www.w3.org/TR/css3-transforms/.

Используя свойство transform можно задавать элементу одну и более функций для трансформации. Все функции можно найти тут: Transform Functions

Возможные значения: none или функции трансформаций через пробел.

Примеры трансформаций:

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

transform: translateZ(5em) rotateY(90deg);

и

transform: rotateY(90deg) translateZ(5em);

дадут совершенно разный результат, а строчка:

transform: rotateY(45deg) rotateY(45deg);

повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.

Transform-origin

Свойство определяет центр трансформации.

Возможные значения: расстояния в пикселях или процентах или ключевые слова (left, center, right, top, bottom).

Исходное значение: 50% 50% — центр элемента.

Координаты отсчитываются от верхнего левого угла элемента. Если задано только одно значение, второе принимает значение center. Если задано два значения, третье принимает значение 0.

Transform-style

Определяет поддержку 3D внутри трансформируемого элемента.

Возможные значения:

flat — трансформируемый элемент плоский

preserve-3d — трансформируемый элемент имеет внутренний объем

Следующие свойства могут перекрывать действие transform-style: preserve-3d; и делать отображение элемента плоским независимо от значения transform-style:

overflow с любым значением кроме visible

opacity с любым значением кроме 1 (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем transform-style: preserve-3d;

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

filter с любым значением кроме none

Perspective

Свойство определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена в сторону зрителя. Задается родителю трансформируемых элементов.

Возможные значения: none или длина в пикселях.

Perspective-origin

Отвечает за расположение точки, от которой отсчитывается перспектива. По сути, задается положение зрителя относительно сцены.

Возможные значения: расстояния в пикселях или процентах или ключевые слова (left, center, right, top, bottom).

Backface-visibility

Определяет видимость задней стороны объекта.

Возможные значения:

visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию).

hidden — скрывать объект, если он повернут «спиной».

Создание компонента sidenav

Фундаментальный обзор того, как создать адаптивный выдвигающийся компонент sidenav

В этой статье я хочу поделиться с вами своим способом создания адаптивной боковой панели навигации (sidenav), которая отслеживает состояние, поддерживает управление с клавиатуры, работает с JavaScript и без него и поддерживается разными браузерами. Попробуйте демонстрацию.

Если вы предпочитаете видео, можете посмотреть видеоверсию этой статьи на YouTube:

Обзор #

Создать адаптивную систему навигации непросто. Некоторые пользователи могут работать с помощью клавиатуры, одни при входе на сайт будут использовать мощный компьютер, другие — маленькое мобильное устройство. Но каждый из посетителей должен иметь возможность открыть и закрыть меню.Демонстрация адаптивности макета на десктопе и мобильныхСветлая и темная тема на iOS и Android

Веб-подходы #

При исследовании этого компонента я совместил несколько важных концепций веб-разработки:

  1. CSS-псевдокласс :target
  2. CSS Grid
  3. CSS-трансформации
  4. CSS-медиазапросы для области просмотра и пользовательских предпочтений
  5. JS для улучшения удобства использования focus

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

CSS-псевдокласс

:target #

Одна ссылка &LTa> устанавливает в URL-хеш значение #sidenav-open, а вторая — пустое значение (''). У самого элемента имеется id, соответствующий этому хешу:

a href="#sidenav-open" title="Open Menu" aria-label="Open Menu">

a href="#" title="Close Menu" aria-label="Close Menu">&LT/a>

aside>

&LT/aside>

Нажатие на каждую из этих ссылок изменяет хеш-состояние URL-адреса нашей страницы, а затем с помощью псевдокласса мы показываем и скрываем боковую навигацию:

@media (max-width: 540px) {
#sidenav-open {
visibility: hidden;
}

#sidenav-open:target {
visibility: visible;
}
}

CSS Grid #

Раньше для боковой панели я использовал только макеты и компоненты с абсолютным или фиксированным позиционированием. Технология CSS Grid, однако, с ее синтаксисом grid-area позволяет нам назначать несколько элементов одной строке или столбцу.

Стопки #

Основной элемент макета #sidenav-container представляет собой grid-элемент, который создает 1 строку и 2 столбца, 1 из которых получает имя stack. Когда пространство ограничено, CSS присваивает всем потомкам элемента &LTmain> одно и то же значение grid-области, размещая все элементы в одну и ту же ячейку в виде стопки.

#sidenav-container {
display: grid;
grid: [stack] 1fr / min-content [stack] 1fr;
min-height: 100vh;
}

@media (max-width: 540px) {
#sidenav-container > * {
grid-area: stack;
}
}

Фон меню #

&LTaside> — это анимированный элемент, содержащий боковую навигацию. У него есть два дочерних элемента: контейнер навигации &LTnav> с именем [nav] и фон &LTa> с именем [escape], который используется для закрытия меню.

#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
}

Изменяя значения 2fr и 1fr, можно найти нужное вам соотношение между панелью и кнопкой закрытия на вспомогательном пространстве при открытом боковом меню.Демонстрация того, что происходит при изменении соотношения.

CSS 3D-преобразования и переходы #

Теперь наш макет умещается и в размер мобильной области просмотра. Пока я не добавлю несколько новых стилей, боковая панель по умолчанию будет накладываться на нашу статью. Вот функционал, к которому я стремлюсь в следующем разделе:

  • Анимированное открытие и закрытие
  • Анимация только в том случае, если пользователь ее не отключает
  • Анимирование visibility, чтобы фокус клавиатуры не выходил за пределы экрана

Поскольку я приступаю к реализации анимированного движения, в первую очередь давайте начнем с доступности.

Доступная анимация #

Не всем захочется видеть анимацию выдвигающегося меню. В нашем решении предпочтение пользователя применяется путем настройки CSS-переменной --duration внутри медиазапроса. Значение этого медиазапроса представляет предпочтения операционной системы пользователя в отношении анимации (если они доступны).

#sidenav-open {
--duration: .6s;
}

@media (prefers-reduced-motion: reduce) {
#sidenav-open {
--duration: 1ms;
}
}

Демонстрация работы интерфейса с разными настройками длительности анимации

Теперь, когда наша боковая навигация открывается и закрывается, если пользователь предпочитает ограничить анимацию, я мгновенно перемещаю элемент в область просмотра, поддерживая тем временем состояние без движения.

Переход, трансформация, трансляция #
Боковая панель закрыта (по умолчанию) #

Чтобы на мобильных устройствах наша панель боковой навигации по умолчанию находилась за пределами экрана, я позиционирую элемент с помощью transform: translateX(-110vw).

Обратите внимание, я добавил еще 10vw к типичному закадровому коду -100vw, чтобы гарантировать, что тень box-shadow блока боковой навигации не видна в основной области просмотра, когда панель скрыта.

@media (max-width: 540px) {
#sidenav-open {
visibility: hidden;
transform: translateX(-110vw);
will-change: transform;
transition:
transform var(--duration) var(--easeOutExpo),
visibility 0s linear var(--duration);
}
}
Панель открыта #

Когда элемент #sidenav соответствует псевдоклассу :target, установите позиционирование с помощью translateX() в стандартное значение 0 и посмотрите, как CSS при изменении URL-хеша сместит элемент с его исходной позиции -110vw в позицию «открыто», равную 0, в течение времени, установленного в переменной var(--duration).

@media (max-width: 540px) {
#sidenav-open:target {
visibility: visible;
transform: translateX(0);
transition:
transform var(--duration) var(--easeOutExpo);
}
}
Переход свойства visibility #

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

  • При открытии применять переход не нужно; сразу видимая панель должна выезжать из-за пределов экрана и получать фокус.
  • При закрытии для свойства visibility нужно применить переход, но с задержкой, чтобы панель стала невидимой (hidden) в конце перехода.

Улучшения доступности #

Ссылки #

Это решение основывается на изменении URL-адреса для управления состоянием панели. Естественно, здесь нужно использовать элемент &LTa>, который имеет некоторые преимущества в плане доступности. Давайте дополним наши интерактивные элементы ярлыками, четко отражающими их назначение.

a href="#" title="Close Menu" aria-label="Close Menu">&LT/a>

a href="#sidenav-open" title="Open Menu" aria-label="Open Menu">
svg>...&LT/svg>
&LT/a>

Демонстрация озвучивания и взаимодействия с клавиатурой.

Теперь наши основные кнопки взаимодействия содержат четкое обозначение для пользователей как мыши, так и клавиатуры.

:is(:hover, :focus) #

Этот удобный функциональный псевдоселектор CSS позволяет нам задать стили одновременно для состояний hover и focus.

.hamburger:is(:hover, :focus) svg > line {
stroke: hsl(var(--brandHSL));
}
Добавление JavaScript #
escape для закрытия #

Кнопка Escape на клавиатуре должна закрывать меню, верно? Давайте это реализуем.

const sidenav = document.querySelector('#sidenav-open');

sidenav.addEventListener('keyup', event => {
if (event.code === 'Escape') document.location.hash = '';
});

История браузера #

Чтобы каждое открытие и закрытие панели не создавало отдельную запись в истории браузера, добавьте следующий встроенный JavaScript-код для кнопки закрытия:

a href="#" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)">&LT/a>

Это приведет к удалению записи истории URL-адресов при закрытии панели, как если бы меню никогда не открывалось.

Фокус #

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

sidenav.addEventListener('transitionend', e => {
const isOpen = document.location.hash === '#sidenav-open';

isOpen
? document.querySelector('#sidenav-close').focus()
: document.querySelector('#sidenav-button').focus();
})

Когда боковая панель открывается, фокус попадает на кнопку закрытия. Когда же панель закрывается, фокус попадает на кнопку открытия. Я делаю это с помощью JavaScript, вызывая focus() для элемента.

Заключение #

Теперь вы знаете о моем подходе в реализации этого компонента. Как бы его реализовали вы? Тут есть пространство для творчества. Кто же сделает первую версию со слотами? 🙂

Давайте разнообразим наши подходы и найдем все способы создания компонентов. Создайте демонстрацию на Glitch, напишите мне о своей версии в Твиттере, и я добавлю ее в раздел ремиксов сообщества ниже.

Ремиксы сообщества #

Последнее обновление: — Улучшить статью

undefined

Как пользовать position transform html css

Полный разбор css transform

Приветствую, друзья, сегодня мы полностью разберем css transform. А именно, разберем такие значения css transform, как: translate, rotate, scale, skew, perspective. Трансформация здорово может помочь при разработке, ведь мы можем трансформировать одни элементы, и при этом не затрагивать другие. Так же покажу на примерах где можно использовать то или иное значение css свойства transform. Например, как можно отцентрировать элемент при помощи translate. Давайте начинать!

Примеры css transform

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

2.21. CSS3-трансформации

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

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

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block; , а также элементы, значение свойства display которых вычисляется как table-row , table-row-group , table-header-group , table-footer-group , table-cell или table-caption . Трансформированным считается элемент с любым установленным значением свойства transform , отличным от none .

Существуют два вида CSS3-трансформаций – 2D и 3D. 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transform и transform-origin . Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.

2D-трансформации элементов

Поддержка браузерами

IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-

1. Функции 2D-трансформации transform

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

Допустимые значения:

matrix() — любое число
translate() , translateX() , translateY() — единицы длины (положительные и отрицательные), %
scale() , scaleX() , scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew() , skewX() , skewY() — угол (deg, grad, rad)

Функция Описание
none Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y) Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.
Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает.
Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз.
Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо.
Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает.
Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево.
Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y) Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n) Сдвигает элемент относительно его обычного положения по оси X.
translateY(n) Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y) Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n) Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n) Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол) Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол) Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол) Деформирует стороны элемента относительно оси X.
skewY(угол) Деформирует стороны элемента относительно оси Y.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

2. Точка трансформации transform-origin

Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center , или 50% 50% . Задаётся только для трансформированных элементов. Не наследуется.

transform-origin
Значения:
ось Х( left , center , right , длина, % )
ось Y( top , center , bottom , длина, % )
Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

See the Pen aNQNva by Elena Nazarova (@nazarelen) on CodePen.

3. Множественные трансформации

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

Трансформация

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

Свойство transform поставляется в двух разных наборах — двумерных и трёхмерных. В каждом из них есть свои индивидуальные свойства и значения.

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

Синтаксис transform

Фактический синтаксис для свойства transform достаточно прост и включает свойство transform , за которым идёт значение. Значение определяет тип трансформации, внутри скобок которого следует определённая величина.

Обратите внимание, что свойство transform включает в себя несколько вендорных префиксов, чтобы получить наилучшую поддержку во всех браузерах. Декларация без префикса идёт последней и чтобы переписать версии с префиксом браузер должен полностью поддерживать свойство transform .

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

Двумерная трансформация

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

2d rotate

Свойство transform принимает несколько разных значений. Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки. По умолчанию точкой поворота является центр элемента, 50% 50%, по горизонтали и вертикали. Позже мы обсудим как вы можете изменить эту точку поворота.

Демонстрация rotate

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

2d scale

Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента. Значение масштаба по умолчанию равно 1, поэтому любое значение от .99 до .01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.

Демонстрация scale

Можно масштабировать только высоту или ширину элемента, используя значения scaleX и ScaleY . Значение scaleX будет масштабировать ширину элемента, в то время как значение ScaleY будет масштабировать его высоту. Для масштабирования высоты и ширины элемента, но с разными размерами, могут быть одновременно установлены значения по оси х и у. Для этого используя декларацию scale , задав сперва значение по оси x, затем через запятую значение по оси y.

Демонстрация множественного масштабирования
2d translate

Значение translate работает несколько похоже на относительное позиционирование, толкает и тянет элемент в разных направлениях, не прерывая обычного потока документа. Использование значения translateX изменит положение элемента по горизонтальной оси, значение translateY изменит положение элемента по вертикальной оси.

Как и со значением scale , чтобы одновременно установить значения по осям x и y, воспользуйтесь значением translate и сперва укажите значение по оси х, затем через запятую значение по оси y.

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

Демонстрация translate
2d skew

Последнее значение skew в группе transform используется для искажения элементов по горизонтальной оси, вертикальной оси или двум осям сразу. Синтаксис очень похож на значения scale и translate . Применение значения skewX деформирует элемент по горизонтальной оси, в то время как значение skewY деформирует элемент по вертикальной оси. Чтобы исказить элемент по двум осям, используется значение skew , сперва задаётся значение по оси х, затем через запятую значение по оси у.

Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.

Демонстрация skew

Комбинация трансформаций

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

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

Демонстрация комбинации транформаций

За каждой трансформацией также стоит матрица, явно определяющая поведение transform . Использование значений rotate , scale , transition и skew обеспечивает простой путь задать эту матрицу. Тем не менее, если вы расположены к математике и предпочитаете глубже погрузиться в преобразования, попробуйте свои силы в использовании значения matrix .

Демонстрация двумерного куба

Точка трансформации

Как упоминалось ранее, по умолчанию точкой трансформации является центр элемента, 50% по горизонтали и 50% по вертикали. Чтобы изменить это положение, может быть использовано свойство transform-origin .

Свойство transform-origin может принимать одно или два значения. Когда задано только одно значение, то оно используется для горизонтальной и вертикальной осях. Если указаны два значения, то первое применяется для горизонтальной оси, а второе для вертикальной.

Отдельно значения похожи на позиционирование фонового изображения с помощью размера или ключевых слов. Таким образом, 0 0 аналогично значению top left , а 100% 100% то же самое, что и bottom right . Более конкретные значения также могут быть установлены, к примеру, 20px 50px задаст исходную точку элемента как 20 пикселей от края и 50 пикселей вниз.

Демонстрация transform-origin

Следует отметить, что свойство transform-origin в действительности порождает некоторые проблемы, когда одновременно применяется значение translate у трансформации. Так как они оба пытаются позиционировать элемент, их значения могут вступать в противоречие. Используйте их с осторожностью, лишний раз убедившись что получен желаемый результат.

Перспектива

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

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

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

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

Демонстрация значения perspective

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

Демонстрация свойства perspective
Глубина перспективы

В качестве значения перспективы может быть задано none или длина. Значение none отключает любую перспективу, в то время как значение длины установит глубину перспективы. Чем выше значение, тем дальше вид перспективы, создавая тем самым перспективу довольно низкой интенсивности и небольшое трёхмерное изменение. Низкое значение приближает вид перспективы, тем самым создавая перспективу высокой интенсивности и большое трёхмерное изменение.

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

Демонстрация глубины перспективы
Начало перспективы

Как и в случае установки transform-origin вы можете также задать perspective-origin . Те же значения, используемые для свойства transform-origin , могут быть использованы в свойстве perspective-origin и оказывают такое же влияние на элемент. Есть большая разница между этими двумя подходами — точка трансформации определяет координаты, используемые для расчёта изменения трансформации, тогда как начало перспективы определяет координаты точки схода преобразования.

Демонстрация perspective-origin

Трёхмерная трансформация

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

3d rotate

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

Значение rotateX позволяет поворачивать элемент вокруг оси х, как будто он сгибается пополам по горизонтали. Значение rotateY позволяет поворачивать элемент вокруг оси у, как будто он сгибается пополам по вертикали. И, наконец, значение rotateZ позволяет вращать элемент вокруг оси z.

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

Демонстрация 3d rotate
3d scale

При использовании scaleZ для трёхмерных преобразованиях элементы могут масштабироваться по оси z. Это не очень интересно, когда никаких других трёхмерных преобразований нет, так как нечего, в частности, и масштабировать. В демонстрации ниже масштаб элементов увеличивается и уменьшается по оси z, при этом добавляется значение rotateX , чтобы увидеть поведение scaleZ . При удалении rotateX элементы будут выглядеть не изменёнными.

Демонстрация 3d scale
3D translate

Элементы могут также передвигаться по оси z с помощью значения translateZ . Отрицательное значение будет толкать элемент дальше по оси z, что приводит к уменьшению элемента. Положительное значение будет тянуть элемент ближе по оси z, что приводит к увеличению элемента.

Хотя это может показаться очень похоже на двумерную трансформацию scale , на самом деле у них есть различия. Преобразование происходит по оси z, а не по осям х или у. При работе с трёхмерными преобразованиями возможность переместить элемент по оси z даёт серьёзные преимущества, как при построении куба в примере ниже.

Демонстрация 3d translate
3D skew

skew является единственной двумерной трансформацией, которая не может быть преобразована в трёхмерном масштабе. Элементы могут быть наклонены по осям х и у, затем преобразованы трёхмерно как хотелось бы, но они не могут быть наклонены по оси z.

Сокращённые трёхмерные трансформации

Как и в случае комбинаций двумерных преобразований, есть также значения для записи сокращённых трёхмерных преобразований. Эти значения включают rotate3d , scale3d , transition3d и matrix3d . Эти свойства требуют чуть больше математики, а также глубокого понимания матриц, стоящих за каждой трансформацией. Если вам интересно чуть глубже взглянуть на это, тогда вперёд!

transform-style

В некоторых случаях трёхмерные трансформации будут применяться к элементу, вложенному в родительский элемент, который в свою очередь также трансформируется. В этом случае вложенные преобразованные элементы не будут появляться в своём собственном трёхмерном пространстве. Чтобы позволить вложенным элементам трансформироваться в их собственной трёхмерной плоскости применяется свойство transform-style со значением preserve-3d .

Свойство transform-style должно быть добавлено к родительскому элементу, выше любых вложенных преобразований. Значение preserve-3d позволяет преобразованным дочерним элементам появляться в их собственной трёхмерной плоскости, в то время как значение flat заставляет преобразованные дочерние элементы лежать в двухмерной плоскости.

Демонстрация transform-style

Чтобы увидеть дополнительный пример использования свойства transform-style в действии прочитайте объяснение WebKit.

backface-visibility

При работе с трёхмерными преобразованиями, элементы время от времени трансформируются таким образом, что их поверхность отворачивается от экрана. Это может быть вызвано установкой значения rotateY(180deg) , к примеру. По умолчанию эти элементы показываются с обратной стороны. Так что если вы не желаете видеть эти элементы вообще, установите свойство backface-visibility как hidden , и вы спрячете элемент всякий раз, когда он отворачивается от экрана.

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

В демонстрации ниже обратите внимание, что второй блок не отображается, поскольку установлена запись backface-visibility: hidden . Свойство backface-visibility имеет более важное значение при использовании анимации.

Трансформация текста. HTML, XHTML и CSS на 100%

Читайте также

Вывод текста

Вывод текста Было бы странно, если канва не позволяла выводить произвольный текст. Существуют два метода и несколько свойств для вывода текста.Метод strokeText выводит заданный текст в указанное место. Текст рисуется в виде контура, без заливки; цвет контура задается

Трансформация данных с помощью DataPropagator

Трансформация данных с помощью DataPropagator Ранее, при обсуждении хранилищ данных мы упоминали о средствах трансформации данных, использующихся для их перемещения данных из оперативной базы в информационную. DataPropagator — одно из таких средств. Его можно использовать не только

19.4. Обработка текста

19.4. Обработка текста bpe файлПрограмма bpe — это редактор двоичных файлов. Данная программа позволяет редактировать файл в двоичном или шестнадцатиричном режиме. После запуска программы вы можете использовать множество команд редактирования. Некоторые из них

9. Личная трансформация

9. Личная трансформация Этот пункт тоже похож на то, что мы уже обсудили. Это факты личной трансформации и вашего превращения. Некая сфера, в которой вы раньше были гусеницей, а теперь стали красивой

Трансформация объектов

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

Стиль текста

Стиль текста Шрифтом, высотой и другими характеристиками, которые влияют на вид текста, можно управлять с помощью текстовых стилей. С любым текстом на рисунке связан определенный стиль. При добавлении нового текста используются настройки стиля, заданные в данный момент.

Трансформация слоев

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

Трансформация объектов и выделений

Трансформация объектов и выделений

Трансформация XML-кода комментариев

Трансформация XML-кода комментариев Предыдущие версии Visual Studio 2005 (в частности. Visual Studio .NET 2003) предлагали очень полезный инструмент, позволяющий преобразовать файлы с XML-кодом документации в систему HTML-справки. К сожалению, Visual Studio 2005 не предлагает такой утилиты, оставляя

Оформление текста

Оформление текста Оглавление и указателиЕсли вы создаете в Word документ большого объема (такой, например, как эта книга, дипломная работа или большая журнальная статья), частенько возникает необходимость добавить в него всевозможные дополнительные перечни.Оглавление,

Глава 4 Трансформация графики

Глава 4 Трансформация графики Что ж, рисовать графику во Flash мы научились. Править тоже. Теперь выясним, что мы еще можем делать с уже нарисованной графикой.В этой главе мы узнаем, как выполняются операции так называемой трансформации графики: сдвиг, вращение, изменение

Трансформация текстовых блоков

Трансформация текстовых блоков Мы можем применять к текстовым блокам те же трансформации, что и к другим фрагментам изображения. Делается это точно так же — выделяем нужный текстовый блок, выбираем в главном инструментарии инструмент «трансформатор» и перемещаем

НОУ ИНТУИТ | Лекция | Макет

Аннотация: Здесь читателю предлагается методика проектирования макетов приложений для Магазина Windows с использованием средств CSS, а так же — проектирование макетов с учетом различных состояний просмотра приложения

Файлы к данной лекции Вы можете скачать здесь.

В сравнении с другими членами моей семьи, я меньше сплю и часто встаю поздно ночью или перед рассветом. Для того, чтобы не будить остальных, я обычно не включаю свет и перемещаюсь в темноте (здесь, в сельских предгорьях Сьерра-Невады, бывает по-настоящему темно!) Так как я знаю планировку дома и расстановку мебели, мне не нужно многого видеть. Я лишь нуждаюсь в нескольких контрольных точках, вроде дверного проёма, углов стен или края кровати, для того, чтобы точно знать, где я нахожусь. Более того, моё тело обладает мышечной памятью, в которой зафиксировано расположение дверных ручек, количество ступенек на лестнице, количество шагов, необходимое, чтобы обойти кровать и так далее. Это по-настоящему помогло мне понять, как слабовидящие люди «видят» их мир.

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

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

Хороший дизайн приложения, очевидно, следует тем же принципам. Именно поэтому Microsoft рекомендует следовать единообразным шаблонам поведения приложений, как описано в материалах «Разработка интерфейсов пользователя для приложений» (http://msdn.microsoft.com/library/windows/apps/hh779072.aspx) и «Руководство по проектированию приложений Магазина Windows» (http://msdn.microsoft.com/library/windows/apps/hh770552.aspx). Эти рекомендации, в любом случае, нельзя считать ни странными, ни случайными, так как они являются результатов многих лет исследований, поисков того, что будет работать лучше всего и для Windows 8 в целом, и для отдельных приложений. Особенности расположения панели чудо-кнопок, команд на панели приложения (как мы увидим в «Жизненный путь приложений для Магазина Windows: Характеристики платформы Windows 8» курса «Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript»), продиктованы особенностями анатомии людей, а именно, тому, как далеко мы можем перемещать пальцы по экрану, удерживая при этом в руках планшетный компьютер.

В случае с макетами страниц, рекомендации, «Создание макета приложения» (http://msdn.microsoft.com/library/windows/apps/hh872191.aspx), где показано идеальное расположение тела страницы и заголовков, где выверены расстояния между элементами страницы, могут показаться серьезно ограничивающими ваши возможности, если не драконовскими. Общий стиль Windows, однако — это отличная отправная точка, но не жёсткое правило. Гораздо важнее, что форма макета приложения помогает пользователям развивать визуальную и мышечную память, которая применима ко многим приложениям. Исследования показали, что пользователь вырабатывает подобные привычки довольно быстро, за минуты. Но, конечно, эти привычки не имеют попиксельной точности. Другими словами, общий стиль показывает общую форму, которая помогает пользователю немедленно понять, как работает приложение и где нужно искать определенные его функции. Это похоже на то, как вы легко узнаете букву «S», набранную разными шрифтами. Такой подход эффективен и продуктивен. С другой стороны, когда существует приложение, которые использует совершенно иной макет (или, что хуже, когда макет похож на макет в стиле Windows 8, а работает он иначе), пользователь может потратить больше сил на то, чтобы понять, куда посмотреть, куда кликнуть, так же, как я вынужден был бы быть гораздо более внимательным ночью, если бы вы передвинули всю мою мебель!

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

После этого мы скоцентрируемся на том, как реализовать дизайн макета, а не на создании дизайна как такового. (Хотя я, очевидно, унаследовал от моих родителей гены, которые наградили меня способностями к технической коммуникации, мой брат получил больше генов, которые в ответе за искусство!). Например, мы ответим на вопросы о том, как приложение должно отвечать на изменение режима просмотра для того, чтобы показать страницы в правильном дизайне (для полноэкранного альбомного, заполняющего, прикрепленного, портретного режимов)? Как приложение ведет себя на экранах различных размеров и различной плотности пикселей?

Кроме того, мы потратим некоторое время на работу с CSS-сеткой и некоторыми другими возможностями CSS, имеющими отношение к макетам, такими, как гибкие окна или многоколоночный текст. Вообще говоря, всё это — стандарты CSS, поэтому я ожидаю, что вы уже знаете что-то о них, или можете разыскать полную документацию по ним1. Мы, таким образом, рассмотрим лишь некоторые основы, потратив больше времени на то, чтобы понять, как лучше всего применять эти возможности в приложениях, и на аспекты, уникальные для среды Windows 8 (на то, например, что называется точкой прикрепления (snap point) в элементе div, поддерживающем сдвиг / прокрутку (pan / scroll)).

Напоминаю снова, что имеются элементы пользовательского интерфейса, которые не входят в макет приложения, такие, как всплывающие элементы, панель приложения. Им посвящены другие лекции. Существуют и вспомогательные страницы приложений, обслуживающие контракты (такие, как Поиск или Параметры), и существующие за пределами главного потока навигации. Они подчиняются тем же принципам построения макетов, о которых речь идёт в данной лекции, но то, как и когда они появляются, мы обсудим позже.

Принципы построения макетов приложений для Магазина Windows

Макет, очевидно, является одним из центральных элементов, которого касаются рекомендации по дизайну приложений для Windows. Принцип «прежде всего содержимое, и лишь затем внешнее оформление» («content before chrome») означает, что большая часть того, что вы отображаете на каждой из страниц приложения — это содержимое, с небольшим количеством управляющих поверхностей, постоянных навигационных панелей и пассивных графических элементов наподобие разделителей, размытий, градиентов, которые сами по себе ничего не значат. Другой вариант реализации подобного заключается в том, что содержимое само по себе следует сделать интерактивным, вместо того, чтобы конструкировать пассивные элементы, управляющее воздействие на которые оказывают команды, активируемые пользователем не посредством самих этих элементов. Семантическое масштабирование — хороший пример подобного интерактивного содержимого — вместо необходимости иметь кнопки или меню для изменения масштаба где-то в приложении, эту возможность реализует сам элемент управления, иногда, когда с приложением работают с помощью мыши, выводя небольшую кнопку зуммирования. Другие команды приложения, по большей части, похожим образом привязаны к элементам пользовательского интерфейса, которые появляются тогда, когда они нужны, посредством панелей приложения и других всплывающих элементов, о которых мы поговорим в «Жизненный путь приложений для Магазина Windows: Характеристики платформы Windows 8» курса «Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript».

Коротко говоря, принцип «прежде всего содержимое, и лишь затем внешнее оформление» подразумевает создание эффекта погружения в содержимое для пользователя, работающего с приложением, вместо того, чтобы отвлекать его на несущественные детали. В проектировании приложений для Магазина Windows особое внимание уделяется пустому пространству вокруг содержимого и между отдельными его блоками, которое служит для организации и группировки содержимого без необходимости в линиях и рамках. Обычно прозрачные «рамки из пустого пространства» помогают взгляду пользователя притягиваться к содержимому, которое имеет значение. В дизайне приложений для Windows используются принципы типографики (размер шрифта, его насыщенность, цвет и так далее) для создания ощущения структуры, иерархии и сравнительной важности различного содержимого. Это так по той причине, что текст на странице — это уже содержимое, почему бы не использовать его характеристики — типографику — для того чтобы достичь тех же целей, которые обычно достигаются за счёт внешних элементов оформления? (Если говорить об общем стиле макета, широкое использование шрифта Segoe UI в дизайне приложения не является жёстким правилом, скорее начальной точкой. Применение однородных наборов параметров шрифтов (type ramp) для различных заголовков важнее, нежели сами шрифты).

В качестве примера, на Рис. 6.1 показан типичный дизайн настольного или веб-приложения для чтения RSS-лент. Обратите внимание на постоянные элементы внешнего оформления сверху и снизу: команда поиска, закладки для навигации, элементы управления для навигации и так далее. Это занимает примерно 20% пространства экрана. В том, что остаётся примерно две трети занимают служебные элементы, оставляя лишь 20-25% на содержимое, которое нам действительно нужно — на статью.

Рис. 6.2 показывает приложение для тех же целей, дизайн которого соответствует дизайну для Магазина Windows. Обратите внимание на то, как вспомогательные команды убраны с основного экрана. Поиск можно выпонить с помощью чудо-кнопки Поиск. Настроить параметры можно посредством чудо-кнопки Параметры. Добавление новых лент, обновление, навигация — реализованы на панели приложения. А переключение между режимами просмотра реализовано на основе контекстного масштабирования. Для отражения иерархии содержимого используется типографика вместо элементов управления, изображающих папки. В итоге, для содержимого доступна большая часть экрана — около 75%. В результате, мы можем увидеть гораздо больше содержимого, чем раньше, что создаёт гораздо более глубокий и захватывающий опыт взаимодействия пользователя и приложения. Не так ли?


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

Даже там, где применяются правила типографики, дизайн для Windows приветствует использование различных размеров шрифта, набора типографских параметров, для того, чтобы создать ощущение иерархии. Таблиц стилей WinJS по умолчанию — ui-light.css и ui-dark.css — предоставляют четыре фиксированных размеров шрифта, где каждый следующий уровень пропорционально больше предыдущего (42 пункта = 80 пикселей, 20 пунктов = 40 пикселей и так далее, как показано на Рис. 6.3. Эти пропорции позволяют пользователю легко, с одного взгляда, выяснять и понимать структуру содержимого. Опять же, это касается привычек и мышечной памяти, и исследования Microsoft показали, что без подобной разницы в размерах, пользователь обычно не может чётко определить роль того или иного содержимого в общей иерархии.


Рис. 6.3. Набор типографских параметров в дизайне приложений для Магазина Windows, показанный для таблиц стилей ui-light.css (слева) и ui-dark.css (справа)

Внутри основного содержимого дизайн для Windows приветствует следующие принципы построения макетов:

  • Позвольте содержимому располагаться от края до края.
  • Помните об эргономике: осуществляйте сдвиг содержимого вдоль длинного края области просмотра (обычно горизонтального в альбомном режиме, вертикального — в прикрепленном, и, возможно, в портретном).
  • Осуществляйте сдвиг содержимого только по одной оси, что создаёт ощущение стабильности и позволяет использовать жест скольжения по диагонали для выделения (как в случае с элементом управления ListView), или используйте ограничители (rails) для ограничения направления сдвига одной осью.
  • Выравнивайте содержимое, создавайте структуру, чёткость, следуя общему стилю Windows 8, выравнивая элементы по сетке для их единообразного расположения. Обратитесь снова к материалу «Создание макета приложения» (http://msdn.microsoft.com/library/windows/apps/hh872191.aspx). Здесь показано, что позволяет глазам пользователя принимать что-то за приложение для Магазина Windows без необходимости размышлять об этом, что создаёт ощущение того, что пользователь знаком с приложением и чувствует себя в нём уверенно.

Как мы упоминали выше, шаблоны проектов в Visual Studio и Blend созданы с учётом этих принципов, и, таким образом, предоставляют удобную стартовую точку для приложений. Даже если вы начинаете с шаблона Пустое приложение, другие, наподобние шаблона Приложение таблицы, будут служить справочным материалом. Именно это мы сделали с приложением «Here My Am!» в «Быстрый старт» .

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

Использование преобразований CSS — CSS: каскадные таблицы стилей

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

Преобразования CSS реализуются с помощью набора свойств CSS, которые позволяют применять аффинные линейные преобразования к элементам HTML. Эти преобразования включают вращение, наклон, масштабирование и перемещение как в плоскости, так и в трехмерном пространстве.

Предупреждение: Только элементы, позиционированные блочной моделью, могут быть преобразованы ed. Как правило, элемент позиционируется блочной моделью, если он имеет отображение : блок .

Первым устанавливаемым элементом является перспектива . Перспектива — это то, что дает нам трехмерное впечатление. Чем дальше от зрителя находятся элементы, тем они меньше.

Настройка перспективы

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

HTML

В приведенном ниже HTML-коде создаются четыре копии одного и того же блока с разными значениями перспективы.

  <таблица>
  <тело>
    
      перспектива: 250 пикселей;
      
      перспектива: 350 пикселей;
      
    
    
      <тд>
        <дел>
          <дел>
            <дел>1
            <дел>2
            <дел>3
            <дел>4
            <дел>5
            <дел>6
          
<тд> <дел> <дел> <дел>1 <дел>2 <дел>3 <дел>4 <дел>5 <дел>6