CSS 3d эффект

Для начала познакомься с потрясающим 3D эффектом на чистом HTML+CSS. Тут нет никаких скриптов, никакого флеша.

Итак, смотрим пример. Проверено в:

• IE 7-8 (наблюдалась некоторая «неплавность»)
• Firefox 3.5
• Opera 10.5
• Safari 4
• Chrome 10

Если интересно, как это сделано, предлагаю перевод статьи автора примера, Романа Кортеса www.romancortes.com/blog/3d-meninas-explained/ — 3D Meninas explained. Далее все от его лица.

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

Поиск точки схождения

Проводим 2 линии (зеленого цвета), являющиеся параллельными для правой стены, пока они не пересекутся. Точка их пересечения — и есть точка схождения. Проводим еще две линии по правой и нижней сторонам задней стенки (красные). Линия, проходящая через точку схождения и точку пересечения красных линий (синяя) определяет грань между полом и правой стеной.

Скорость движения слоев

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

Вырезаем рисунки

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

CSS спрайты

В этом примере я использовал технику CSS спрайтов. Картинка получилась такая:

Итак, как сделать CSS спрайт? Используй блочный элемент с заданным фоновым изображением и нужной тебе шириной и высотой. Определи смещение позиции нужного фона на общем изображении. Помни, что значение смещения указывается отрицательное.

<div style="background-image: url(’meninas-sprites.png’); width: 205px; height: 128px; background-position: -23px -120px"></div>

Сложные эффекты наведения

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

<a href="#" mce_href="#"><img src="something.jpg" mce_src="something.jpg" />Some text here <span>and more text here</span></a>

a img {
	position: absolute;
	top: 500px;
	left: 300px;
}
a:hover img {
	top: 400px;
}
a:hover span {
	font-weight: bold;
}

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

Как слои двигаются за курсором мыши?

Для полного эффекта понадобилось 80 элементов 5×455 пикселей каждый. Каждый элемент содержит в себе элементы-слои с определенными позициями каждого слоя и фоновым изображением. Когда элемент не активен (над ним нет мыши) все его внутренние слои скрываются с помощью display: none.

Когда элемент активный, его внутренние элементы отображаются (display: block) и происходит их позиционирование. Эти позиции были заранее рассчитаны и прописаны в CSS для каждого слоя в каждом из 80-ти элементов. Это тот труд, благодаря которому стала возможна магия.

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

Как же заставить это заработать? Решение, которое я нашел, основано на использовании z-index и размещении span’ов поверх изображений. Это прекрасно работает во всех основных браузерах.

Правильный боковой фон

Идеальный эффект параллакса достигается не с помощью 4-5 слоев, а если создать отдельный слой для каждой вертикальной линии шириной в 1 пиксель. Это будет 200-300 слоев. HTML/CSS код для этого будет намного больше и браузеры вряд ли смогут обработать его на приличной скорости.

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

Тогда, в то время как первое изображение только перемещается, второе изображение с правой стены перемещается и изменяет ширину. Вы не можете изменить размер CSS спрайтов или фонового изображения, но вы можете изменить размер элемента <img>.