ПОРТАЛ
WebDirectUA
Ср, 20.09.2017, 12:17
Приветствую Вас Гость | RSS
 
Главная Блог СайтостроителяРегистрацияВход
Меню сайта
Мини-чат
Наш опрос
Какая социальная сеть Вам нравится больше?
Всего ответов: 70


Реферальные банеры


  

Статистика

Рейтинг@Mail.ru

В онлайне: 1
Гости: 1
Пользователи: 0
Главная » 2013 » Май » 2 » Как применить трансформацию CSS3 к фоновым картинкам
01:27
Как применить трансформацию CSS3 к фоновым картинкам


Поддерживается всеми современными браузерами (с префиксами)

 и допускает изящную деградацию, к примеру:#myelement { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

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

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

Трансформация только фона

У контейнера может не быть никаких стилей, но необходимо задать position: relative, поскольку наш псевдо-элемент располагается внутри. Также установите overflow: hidden, в противном случае фон будет выходить за пределы контейнера.

#myelement {
 position: relative;
 overflow: hidden;
}

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

#myelement:before {
 content: "";
 position: absolute;
 width: 200%;
 height: 200%;
 top: -50%;
 left: -50%;
 z-index: -1;
 background: url(background.png) 0 0 repeat;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
}

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

Фиксация фона у трансформируемых элементов

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

#myelement {
 position: relative;
 overflow: hidden;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
}
#myelement:before {
 content: "";
 position: absolute;
 width: 200%;
 height: 200%;
 top: -50%;
 left: -50%;
 z-index: -1;
 background: url(background.png) 0 0 repeat;
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
 -ms-transform: rotate(-30deg);
 -o-transform: rotate(-30deg);
 transform: rotate(-30deg);
}

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

Полный код хранится внутри HTML. Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.

IE6 и 7 не поддерживает псевдо-элементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.

Пожалуйста, посмотрите демонстрационную страницyдля примера.

Источник: ©htmlbook.ru
«WebDirect»
Просмотров: 659 | Добавил: WebDirect | Теги: сайтостроение-трансформация CSS3 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
Логин:
Пароль:
Поиск
Календарь
«  Май 2013  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031

SOCIAL SITES
 СОЦ. СЕТЬ 



Архив записей


WebDirectUA © 2012-2017
Используются технологии uCoz