Эффект поворота куба для ссылки CSS / Эффекты / Сниппеты Bootstrap

Версия: v1.0.2

Категория: Эффекты

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Angular, WHMCS, PHP

Язык: Русский

Вес файла: 0.6 Kb

Уникальный ID: 5707

Количество символов:

Посмотрели: 615 раз

Прикреплён файл №1: /_sf/57/5707.html

Прикреплён файл №2: /stuff/0-0-0-5707-20

Скачали бесплатно: 15 раз

Прокомментировали: 0 раз

Рейтинг: 2.9 / 5 - 9 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Поделился: BootstrapТема

Добавлено: 2023-02-05 в 11:34

Метка: 1675586054

⇄ ⇅

.menucubtop {
 position: absolute;
 top: 0;
 display: inline-block;
 transform: translateY(-50%) rotateX(90deg);
 transition: transform 0.6s ease;
}

.menucubfront {
 display: inline-block;
 transform: translateZ(0.5em);
 transition: transform 0.6s ease;
 text-decoration: underline;
}

.menucub:hover .menucubtop {
 transform: translateZ(0.5em);
 color: black;
}

.menucub:hover .menucubfront {
 transform: translateY(50%) rotateX(-90deg);
}
</style>

BootstrapTema