Тилт-эффект для изображений

demosourse

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

Как работает эффект?

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

Изображение с классом “tilt-effect”:

<div class="grid__img">
	<img class="tilt-effect" src="img/theimage.jpg" alt="The image" />
</div>

…превращается в набор изображений с фоновыми картинками идентичными исходнику:

<div class="grid__img">
    <div class="tilt">
        <div class="tilt__back" style="background-image: url(img/theimage.jpg);"></div>
        <div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>
        <div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>
    </div>
</div>

Взгляните в демо пример для изучения конфигурации. Стили можно найти в demo.css.

Надеемся, данный эффект вам понравился!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/05/28/image-tilt-effect/
Перевел: Станислав Протасевич
Урок создан: 8 Июня 2015
Просмотров: 11686
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^