Ефект 3d кнопки на css3 використовуючи 3d transform

Є багато способів спочатку приховати інформації і показати її, припустимо, після натискання на кнопку або в спливаючому вікні. У цьому уроці я збираюся розповісти про такий спосіб як створення ефекту куба при наведенні на кнопку використовуючи CSS3.

Приклад кнопок можна побачити тут. Я зробив 6 різних кнопок:

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

HTML частина - Ефект 3D кнопки

Кнопки створюються за допомогою наступних блоків. Спочатку текст, який знаходиться в с ідентифікатором information прихований і з`являється він лише при наведенні на кнопку:

12345678

lt;div class="Wrapper"gt;lt;div class="Item"gt;lt;img src="Images / contact.jpg"gt;lt;span class="Information"gt;lt;stronggt; Кнопка 1lt;/stronggt; Nam vel dignissim arcu. Quisque pretium imperdiet magna in pretium.lt;/spangt;lt;/divgt;lt;/divgt;

Відео: CSS3 Flip 3D Animation For Boxes and Cards HTML5 Tutorial

CSS частина

Тут ми й ставимо все властивості для наших кнопок. І створюємо ефект 3D трансформування:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104

.wrapper {display: inline-block-width: 310px-height: 100px-vertical-align: top-margin: 1em 1.5em 2em 0-cursor: pointer-position: relative-font-family: Tahoma, Arial--webkit-perspective: 4000px--moz-perspective: 4000px--ms-perspective: 4000px--o-perspective: 4000px-perspective: 4000px-}.item {height: 100px--webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d--ms-transform-style: preserve-3d--o-transform-style: preserve-3d-transform-style: preserve-3d--webkit-transition: -webkit-transform .6s--moz-transition: -moz-transform .6s--ms-transition: -ms-transform .6s--o-transition: -o-transform .6s-transition: transform .6s-}.item: hover {-webkit-transform: translateZ(-50px) rotateX(95deg)--moz-transform: translateZ(-50px) rotateX(95deg)--ms-transform: translateZ(-50px) rotateX(95deg)--o-transform: translateZ(-50px) rotateX(95deg)-transform: translateZ(-50px) rotateX(95deg)-}.item: hover img {box-shadow: none-border-radius: 15px-}.item: hover .information {box-shadow: 0px 3px 8px rgba(0,0,0,0.3)-border-radius: 3px-}.item img {display: block-position: absolute-top: 0-border-radius: 3px-box-shadow: 0px 3px 8px rgba(0,0,0,0.3)--webkit-transform: translateZ(50px)--moz-transform: translateZ(50px)--ms-transform: translateZ(50px)--o-transform: translateZ(50px)-transform: translateZ(50px)--webkit-transition: all .6s--moz-transition: all .6s--ms-transition: all .6s--o-transition: all .6s-transition: all .6s-}.item .information {display: block-position: absolute-top: 0-height: 80px-width: 290px-text-align: left-border-radius: 15px-padding: 10px-font-size: 12px-text-shadow: 1px 1px 1px rgba(255,255,255,0.5)-box-shadow: none-background: rgb(236,241,244)-background: -moz-linear-gradient(top, rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%)-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1)))-background: -webkit-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%)-background: -o-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%)-background: -ms-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%)-background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%)-filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="# Ecf1f4 `, endColorstr=`# Becad9`,GradientType=0 )--webkit-transform: rotateX(-90deg) translateZ(50px)--moz-transform: rotateX(-90deg) translateZ(50px)--ms-transform: rotateX(-90deg) translateZ(50px)--o-transform: rotateX(-90deg) translateZ(50px)-transform: rotateX(-90deg) translateZ(50px)--webkit-transition: all .6s--moz-transition: all .6s--ms-transition: all .6s--o-transition: all .6s-transition: all .6s-}.information strong {display: block-margin: .2em 0 .5em 0-font-size: 20px-font-family: "Oleo Script"-}

висновок

Вийшов дійсно гарний ефект куба. Цей ефект для кнопок явно додасть оригінальності вашому сайту. Звичайно можна змінювати час повороту і експериментувати з параметрами, якщо вам щось хочеться змінити.