TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити віджет поворотного куба CSS?

1

CSS – це звір, особливо коли ви знаходитесь на етапі навчання, цікаво практикувати різні властивості. Властивості анімації веб -набору CSS цікаво пограти для створення привабливої ​​анімації для вашого сайту. У цій статті ми створимо простий віджет куба CSS, що обертається, використовуючи ключові кадри.

Пов’язані: Підручник з HTML для початківців.

Що таке обертовий куб?

Обертовий куб буде виглядати так, як показано нижче.

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

Компоненти віджета

Віджет має два компоненти – CSS та HTML. Рекомендується розміщувати CSS -частину у заголовку веб -сторінки, а HTML -частину – у тілі.

1 CSS для віджета

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

<style type="text/css"> #box div { position: absolute; height: 250px; width: 250px; border: 1px solid lightgrey; background: rgba(255,200,100,0.8); text-align: center; font-size: 200px; } #box { -webkit-animation-name: animation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; margin:80; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 125px 125px 0; } #box .one { -webkit-transform: translateZ(125px); } #box .two { -webkit-transform: rotateX(-90deg) translateZ(125px); } #box .three { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px); } #box .four { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px); } #box .five { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px); } #box .six { -webkit-transform: rotateY(90deg) translateZ(125px); } @-webkit-keyframes animation { from,to{} 16% { -webkit-transform: rotateY(-90deg);} 33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);} 50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);} 66% { -webkit-transform: rotateY(135deg) rotateX(135deg);} 83% { -webkit-transform: rotateX(135deg);} } </style>

2 HTML для віджета

Нижче наведено HTML -код віджета, вам потрібно замінити зображення власними URL -адресами зображень.

<div id="view" style="width:350px; height:250px; margin:80px auto 0 auto;"> <div id="box"> <div class="one"><img src="https://img.webnots.com/2016/09/A-One.png"></div> <div class="two"><img src="https://img.webnots.com/2016/09/B-Two.png"></div> <div class="three"><img src="https://img.webnots.com/2016/09/C-Three.png"></div> <div class="four"><img src="https://img.webnots.com/2016/09/D-Four.png"></div> <div class="five"><img src="https://img.webnots.com/2016/09/E-Five.png"></div> <div class="six"><img src="https://img.webnots.com/2016/09/F-Six.png"></div> </div> </div>

Налаштування віджета

Ви можете налаштувати віджет відповідно до ваших потреб. Нижче наведено деякі варіанти:

  • Розмір коробки використовується як 250x250px, а translateZ – з половиною ширини як 125px. Якщо ви хочете змінити розмір коробки, обов’язково змініть обидва ці параметри.
  • Обов’язково використовуйте зображення, які мають ті ж розміри, що і коробка. У цьому прикладі ми використовували зображення розміром 250x250px з усіх боків коробки. Ви також можете використовувати будь -який текст замість зображення або поєднання тексту / зображення на різних обличчях.
  • Швидкість обертання визначається як 6 секунд у CSS як "-webkit-animation-duration: 6s;". Ви можете збільшити або зменшити швидкість обертання відповідно до ваших потреб.
  • Для зміни швидкості перетворення використовуйте відсоткові значення анімації ключових кадрів.
  • Положення вікна визначається за допомогою вбудованого стилю в HTML -коді як ширина 350px, висота 250px і поле 180px. Ви можете налаштувати ці значення, щоб правильно розмістити куб на своїй веб -сторінці.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі