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

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 пикселей. Вы можете настроить эти значения, чтобы правильно разместить куб на своей веб-странице.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *