Приголомшливий анімований 3d текст

Відео: Уроки After Effects - як зробити 3d текст (об`ємний текст), відеоуроки для починаючих російською

У цьому уроці розглянемо як створити цікавий ефект анімованого 3D тексту за допомогою псевдо-елементів, CSS переходів і перетворень. Ідея належить проекту «Edenspiekermann`s Open Type project». Метою уроку є показати як можна створити ефект реальної листівки за допомогою CSS перетворень і переходів з використанням псевдо-елементів.

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

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

Пам`ятайте! Псевдо-елементи і переходи не працюють в кожному браузері. Найкраще вони працюють в Chrome і Mozilla.

HTML частина - «Анімаційний 3D текст»

Розмітка сторінка досить проста, кожен елемент списку містить один символ, але символ також узятий в тег з атрибутом data-letter, який в подальшому буде тінню символу:

lt;ul class="Grid"gt;lt;li class="Ot-letter-left"gt; lt;span data-letter=«А»gt; Аlt;/spangt; lt;/ligt;lt;li class="Ot-letter-top"gt; lt;span data-letter="Б"gt; Бlt;/spangt; lt;/ligt;lt;li class="Ot-letter-right"gt; lt;span data-letter="В"gt; Вlt;/spangt; lt;/ligt;lt;li class="Ot-letter-bottom"gt; lt;span data-letter="Г"gt; Гlt;/spangt; lt;/ligt;lt;/ulgt;

CSS частина

У букви буде кілька станів: звичайне, тінь від букви і коли буква піднімається. Основний стиль для букв:

123456789101112131415161718192021222324252627282930313233

.grid li span {display: inline-block-font-weight: 900-line-height: 1-position: relative-color: hsla(0, 0%, 0%, 0.6)--webkit-transform-style: preserve-3d--ms-transform-style: preserve-3d-transform-style: preserve-3d--webkit-perspective: 550px--ms-perspective: 550px-perspective: 550px-z-index: 1-}.grid li span: before,.grid li span: after {position: absolute-content: attr(data-letter)-line-height: inherit-top: 0-left: 0-right: 0-bottom: 0-z-index: 2--webkit-transition: all .3s-transition: all .3s-}.grid li span: before {text-shadow: none-color: hsla(0, 0%, 0%, 0.12)-}

Задаємо властивості щоб буква відкривалася зліва:

12345678910111213141516171819202122232425262728293031

.ot-letter-left span: before,.ot-letter-left span: after {-webkit-transform-origin: 0 50%--ms-transform-origin: 0 50%-transform-origin: 0 50%-}.ot-letter-left span: before {-webkit-transform: scale(1.08,1) skew(0deg,1deg)--ms-transform: scale(1.08,1) skew(0deg,1deg)-transform: scale(1.08,1) skew(0deg,1deg)-}.ot-letter-left span: after {text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4)--webkit-transform: rotateY(-15deg)--ms-transform: rotateY(-15deg)-transform: rotateY(-15deg)-}.ot-letter-left: hover span: before {-webkit-transform: scale(0.85,1) skew(0deg,20deg)--ms-transform: scale(0.85,1) skew(0deg,20deg)-transform: scale(0.85,1) skew(0deg,20deg)-}.ot-letter-left: hover span: after {-webkit-transform: rotateY(-40deg)--ms-transform: rotateY(-40deg)-transform: rotateY(-40deg)-}

Потім справа:

12345678910111213141516171819202122232425262728293031

.ot-letter-right span: before,.ot-letter-right span: after {-webkit-transform-origin: 100% 50%--ms-transform-origin: 100% 50%-transform-origin: 100% 50%-}.ot-letter-right span: before {-webkit-transform: scale(0.85,1) skew(0deg,1deg)--ms-transform: scale(0.85,1) skew(0deg,1deg)-transform: scale(0.85,1) skew(0deg,1deg)-}.ot-letter-right span: after {text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4)--webkit-transform: rotateY(15deg)--ms-transform: rotateY(15deg)-transform: rotateY(15deg)-}.ot-letter-right: hover span: before {-webkit-transform: scale(0.85,1) skew(0deg,-20deg)--ms-transform: scale(0.85,1) skew(0deg,-20deg)-transform: scale(0.85,1) skew(0deg,-20deg)-}.ot-letter-right: hover span: after {-webkit-transform: rotateY(40deg)--ms-transform: rotateY(40deg)-transform: rotateY(40deg)-}

Відео: 🔴 3D текст в фотошопі. Дуже легко і просто!

Властивості для літери, яка відкривається вгору:

12345678910111213141516171819202122232425262728293031

.ot-letter-top span: before,.ot-letter-top span: after {-webkit-transform-origin: 50% 100%--ms-transform-origin: 50% 100%-transform-origin: 50% 100%-}.ot-letter-top span: before {-webkit-transform: scale(1,0.95) skew(-4deg,0deg)--ms-transform: scale(1,0.95) skew(-4deg,0deg)-transform: scale(1,0.95) skew(-4deg,0deg)-}.ot-letter-top span: after {text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4)--webkit-transform: rotateX(-15deg)--ms-transform: rotateX(-15deg)-transform: rotateX(-15deg)-}.ot-letter-top: hover span: before {-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg)--ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg)-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg)-}.ot-letter-top: hover span: after {-webkit-transform: translateY(-0.035em) rotateX(-40deg)--ms-transform: translateY(-0.035em) rotateX(-40deg)-transform: translateY(-0.035em) rotateX(-40deg)-}

І залишилася буква, яка відкривається вниз:

12345678910111213141516171819202122232425262728293031

.ot-letter-bottom span: before,.ot-letter-bottom span: after {-webkit-transform-origin: 50% 0--ms-transform-origin: 50% 0-transform-origin: 50% 0-}.ot-letter-bottom span: before {-webkit-transform: scale(1,1.05) skew(4deg,0deg)--ms-transform: scale(1,1.05) skew(4deg,0deg)-transform: scale(1,1.05) skew(4deg,0deg)-}.ot-letter-bottom span: after {text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4)--webkit-transform: rotateX(15deg)--ms-transform: rotateX(15deg)-transform: rotateX(15deg)-}.ot-letter-bottom: hover span: before {-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg)--ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg)-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg)-}.ot-letter-bottom: hover span: after {-webkit-transform: translateY(0.045em) rotateX(40deg)--ms-transform: translateY(0.045em) rotateX(40deg)-transform: translateY(0.045em) rotateX(40deg)-}