Гнучкий плагін 3d cube

Приголомшливий плагін, за допомогою якого можна створювати 3D кубики для різних цілей. Наприклад, в даному уроці за допомогою цього плагіна ми створимо 3D годинник, які можна налаштовувати просто повертаючи кубики мишкою. До Нового Року залишилося зовсім небагато, але можна зробити відлік використовуючи кубики.

Можливо вас зацікавлять цифровий годинник з неоновим світлом - CSS3 цифровий годинник за допомогою jQuery.

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

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

HTML частина

Бібліотеці HexaFlip створює свою розмітку, а вам необхідно лише додати на сторінку сайту:

1	lt;div id="Hexaflip-demo1" class="Demo"gt; lt;/divgt;

CSS частина

Задамо стиль для кубиків:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

.hexaflip-cube {font-family: Arial, Helvetica, sans-serif-text-rendering: optimizeLegibility--webkit-font-smoothing: antialiased-cursor: move-cursor: -webkit-grab-cursor: -moz-grab-display: inline-block-position: relative--webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d--o-transform-style: preserve-3d--ms-transform-style: preserve-3d-transform-style: preserve-3d--webkit-transition: -webkit-transform 0.4s--moz-transition: -moz-transform 0.4s--o-transition: -o-transform 0.4s--ms-transition: -ms-transform 0.4s-transition: transform 0.4s-}.hexaflip-cube.no-tween {-webkit-transition-duration: 0--moz-transition-duration: 0--o-transition-duration: 0--ms-transition-duration: 0-transition-duration: 0-}.hexaflip-cube gt; div {width: 100%-overflow: hidden-height: 100.5%-position: absolute--webkit-user-select: none--moz-user-select: none--ms-user-select: none-user-select: none--webkit-background-size: cover--moz-background-size: cover-background-size: cover-text-align: center-background-color: # 333-color: #fff-font-weight: 100-text-shadow: 0 -2px 0 rgba(0,0,0,0.2)-line-height: 1.5-}.hexaflip-left,.hexaflip-right {background-color: # 555 !important-}.hexaflip-timepicker .hexaflip-cube: Last-child gt; div: nth-child(odd) {background-color: # ff575b-}

Відео: After Effects Tutorial: Create a 3D Cube Using Snapping

javascript частина

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

var hexaDemo3-document.addEventListener(`DOMContentLoaded`, function(){hexaDemo3 = new HexaFlip(document.getElementById(`Hexaflip-demo3`))-// функція, яка встановлює часsetTimeout(function(){// отримуємо даний час в зміну nowvar now = new Date,// отримуємо годинникhour = now.getHours(),// отримуємо хвилиниminute = now.getMinutes().toString(),meridian-// нижче йде перевірка на am і pmif(hour gt; 12){hour = (hour - 12).toString()-meridian = `Pm`-}else{meridian = `Am`-(hour === 0)  (hour = 12)-hour = hour.toString()-}// якщо хвилина складається з однієї цифри, тоді попереду додаємо нульif(minute.length gt; 1){minute = minute.substr(0, 1) + `0`-}else{minute = `00`-}hexaDemo3.setValue({ hour: hour, minute: minute, meridian: meridian })-}, 1)-// вибрані годинник за допомогою спискуvar hourSelect = document.getElementById("Hour-select `),// вибираємо хвилини за допомогою спискуminuteSelect = document.getElementById(`Minute-select`),// вибираємо am чи pm вид відображати годинникmeridianSelect = document.getElementById(`Meridian-select`)-document.getElementById(`Set-button`).addEventListener(`Click`, function(){var time = {hour: hourSelect.value,minute: minuteSelect.value,meridian: meridianSelect.value}hexaDemo3.setValue(time)-})-}, false)-