Это хороший эффект, который преобразует стандартный квадратный элемент и делает его похожим на перетасованную бумагу. Я помню, что видел похожий эффект несколько лет назад, когда он обрабатывался с изображениями, но мы собираемся использовать чистый CSS3:
Посмотреть демонстрацию и код …
Неудивительно, что для отображения нижних страниц используются псевдоэлементы: before и: after. Они вращаются, используя преобразование, чтобы дать перемешанный взгляд. Код работает в Chrome, Safari, Firefox, IE10 и Opera ( версии Presto и, возможно, Webkit ). Старые браузеры могут показывать нижние страницы, но они не будут поворачивать их, поэтому они фактически невидимы. Однако эффект должен ухудшаться изящно.
Давайте начнем с некоторого HTML:
<div class="papers"> <p>some content</p> </div> Ничего особенного, чтобы увидеть здесь. Я использовал общий div , но вы можете использовать section , article или что-то еще. Класс «документы» отвечает за применение эффекта.
Сначала мы применим фон, границу и тень к основному и обоим псевдоэлементам:
.papers, .papers:before, .papers:after { background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); }
Обратите внимание, что определены две box-shadow : затенение внутренней страницы и тонкая тень.
Далее мы определим стили для основного элемента. В первую очередь это ширина, отступы и поля, но наиболее важна относительная позиция. Кстати, не поддавайтесь искушению применить z-index ; это заставит псевдоэлементы появляться сверху.
.papers { position: relative; width: 50%; padding: 2em; margin: 50px auto; }
Теперь мы применим некоторый контент, размеры и расположение к псевдоэлементам: before и: after. По сути, они имеют тот же размер, форму и расположение, что и основной элемент:
.papers:before, .papers:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
Теперь начинается интересная часть — мы будем вращать их, используя преобразование. Нам нужен префикс -webkit для Chrome и Safari. Префикс -o необходим для Opera, которая предпочитает rotate вместо rotateZ. Firefox и IE10 поддерживают преобразование без префикса.
-webkit-transform: rotateZ(2.5deg); -o-transform: rotate(2.5deg); transform: rotateZ(2.5deg); z-index: -1; }
Обратите внимание, что мы установили z-index равным -1, чтобы поместить элементы ниже основного контейнера.
Наконец, мы применяем другое вращение к псевдоэлементу: after.
.papers:after { -webkit-transform: rotateZ(-2.5deg); -o-transform: rotate(-2.5deg); transform: rotateZ(-2.5deg); }того, как.papers:after { -webkit-transform: rotateZ(-2.5deg); -o-transform: rotate(-2.5deg); transform: rotateZ(-2.5deg); }
Легко. Посмотреть демонстрацию и код …
Пожалуйста, используйте код по своему усмотрению — это относительно просто применить различные цвета и степени поворота, но вы можете обнаружить ряд интересных эффектов. Разместите свои ссылки ниже …