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

Как создать виджет вращающегося куба CSS?

47

CSS – это чудовище, особенно когда вы находитесь на этапе обучения, полезно практиковать различные свойства. Свойства анимации CSS webkit интересно поиграть для создания привлекательной анимации для вашего сайта. В этой статье мы создадим простой 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>

Настройка виджета

Вы можете настроить виджет в соответствии с вашими потребностями, и ниже приведены некоторые варианты:

  • Размер блока составляет 250×250 пикселей, а translateZ используется с половиной ширины как 125 пикселей. Если вы хотите изменить размер поля, обязательно измените оба этих параметра соответствующим образом.
  • Убедитесь, что вы используете изображения того же размера, что и коробка. В этом примере мы использовали изображения размером 250×250 пикселей со всех сторон коробки. Вы также можете использовать любой текст вместо изображения или комбинацию текста / изображения на разных лицах.
  • Скорость вращения определяется как 6 секунд в CSS как «-webkit-animation-duration: 6s;». Вы можете увеличивать или уменьшать скорость вращения в зависимости от ваших потребностей.
  • Используйте процентные значения анимации ключевых кадров, чтобы изменить скорость преобразования.
  • Положение поля определяется с помощью встроенного стиля в HTML-коде: ширина 350 пикселей, высота 250 пикселей и поле 180 пикселей. Вы можете настроить эти значения, чтобы правильно разместить куб на своей веб-странице.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее