3D постери у вигляді боксів

3D постери у вигляді боксів

При роботі з властивостями 3D трансформації якомога помітити що не мають ніякої тіні і можна подумати що вони плоскі. Для ефекту обсягу можна задати дзеркальне відображення або тінь. А також при наведенні курсору миші зображення буде «повертатися» але не повністю. Ми не будемо використовувати javascript код щоб створити даний ефект, а скористаємося лише можливостями CSS3.

Урок, в якому ми також створювали 3D постери - 3D постери за допомогою CSS3.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Нам необхідно розташувати на сторінці кілька частин постера: передню частину, у вигляді основного зображення, і частина, яка з`являється при наведенні, вона буде з зображенням і текстом:

1234567
lt;div class="Wrapper"gt;lt;ul class="Stage"gt;lt;li class="Scene"gt; lt;/ligt;lt;li class="Scene"gt; lt;/ligt;lt;li class="Scene"gt; lt;/ligt;lt;/ulgt;lt;/divgt;

Відео: 3D-постери із серії "прикраси" (Lenticular posters "Jewelry")

Зараз більш детально розглянемо з чого складається елемент:



12345678910111213141516
lt;li class="Scene"gt;lt;div class="Movie"gt;lt;div class="Poster"gt; lt;/divgt;lt;div class="Info"gt;lt;h1gt; Залізна людина 3lt;/h1gt;lt;span class="Year"gt; 2013lt;/spangt;lt;span class="Rating"gt; PGlt;/spangt;lt;span class="Duration"gt; 131 хвилинаlt;/spangt;lt;/headergt;lt;pgt; Коли світ Старка валиться на його очах з вини невідомих супротивників, Тоні жадає знайти винних і звести з ними рахунки. Опинившись у безвихідній ситуації, Старк може розраховувати тільки на себе і свою винахідливість, щоб захистити тих, хто йому дорогий.lt;/pgt;lt;/divgt;lt;/divgt;lt;/ligt;

CSS частина

Насамперед розташуємо всі постери по центру і приберемо стиль замовчуванням для елементів ненумерованого списку:

123456789
.wrapper {margin: 0 auto 100px auto-max-width: 960px-}.stage {list-style: none-padding: 0-}

Далі пропишемо властивості для зображень і блоків які «повертаються»:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
.scene {width: 260px-height: 400px-margin: 30px-float: left--webkit-perspective: 1000px--moz-perspective: 1000px-perspective: 1000px-}.movie {width: 260px-height: 400px--webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d-transform-style: preserve-3d--webkit-transform: translateZ(-130px)--moz-transform: translateZ(-130px)-transform: translateZ(-130px)--webkit-transition: -webkit-transform 350ms--moz-transition: -moz-transform 350ms-transition: transform 350ms-}.movie: hover {-webkit-transform: rotateY(-78deg) translateZ(20px)--moz-transform: rotateY(-78deg) translateZ(20px)-transform: rotateY(-78deg) translateZ(20px)-}.movie .poster,.movie .info {position: absolute-width: 260px-height: 400px-background-color: #fff--webkit-backface-visibility: hidden--moz-backface-visibility: hidden-backface-visibility: hidden-}.movie .poster{-webkit-transform: translateZ(130px)--moz-transform: translateZ(130px)-transform: translateZ(130px)-background-size: cover-background-repeat: no-repeat-}.movie .info {-webkit-transform: rotateY(90deg) translateZ(130px)--moz-transform: rotateY(90deg) translateZ(130px)-transform: rotateY(90deg) translateZ(130px)-border: 1px solid # B8B5B5-font-size: 0.75em-}.csstransforms3d .movie:: after {content: ``-width: 260px-height: 260px-position: absolute-bottom: 0-box-shadow: 0 30px 50px rgba(0,0,0,0.3)--webkit-transform-origin: 100% 100%--moz-transform-origin: 100% 100%-transform-origin: 100% 100%--webkit-transform: rotateX(90deg) translateY(130px)--moz-transform: rotateX(90deg) translateY(130px)-transform: rotateX(90deg) translateY(130px)--webkit-transition: box-shadow 350ms--moz-transition: box-shadow 350ms-transition: box-shadow 350ms-}.csstransforms3d .movie: hover:: after {box-shadow: 20px -5px 50px rgba(0,0,0,0.3)-}.movie .poster,.movie .info,.movie .info header {-webkit-transition: box-shadow 350ms--moz-transition: box-shadow 350ms-transition: box-shadow 350ms-}.csstransforms3d .movie .poster {box-shadow: inset 0px 0px 40px rgba(255,255,255,0)-}.csstransforms3d .movie: hover .poster {box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8)-}

І останнє додамо зображення для постерів:

1234567891011121314151617181920212223
.scene: nth-child(1) .movie .poster {background-image: url(../img/poster01.jpg)-}.scene: nth-child(2) .poster {background-image: url(../img/poster02.jpg)-}.scene: nth-child(3) .poster {background-image: url(../img/poster03.jpg)-}.scene: nth-child(1) .info header {background-image: url(../img/still01.jpg)-}.scene: nth-child(2) .info header {background-image: url(../img/still02.jpg)-}.scene: nth-child(3) .info header {background-image: url(../img/still03.jpg)-}

Відео: Minecraft Illusion Poster!

Для браузерів які не підтримують 3D трансформації ми використовуємо бібліотеку Modernizr.js, яка може визначити підтримується ту чи іншу властивість старішим браузерам.

Відео: pola negri gluing 3d poster

висновок

Готові постери для вашого сайту, вам лише залишилося взяти вихідні коди і переробити їх під себе.

Успіхів!

джерело: tympanus.net

Відео: 3D Стерео «TTK» (Lenticular 3D Poster)

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!