Список ul li в 3d варианте

Придумывая новые варианты списков для заметки: Оформление списков ul li для информационных блоков, придумалось и получилось что то более интересное, чем просто список, поэтому и решил сделать для него новую запись.

Как и в предыдущей заметке, он работает всего на 1 классе: <ul class="CLASS">

  • СПИСОК В 3D ВАРИАНТЕ

  • Вариант оформления списка в трехмерном стиле, используя всего один класс

  • transform-style: preserve-3d

  • Еще элемент списка

  • И еще элемент списка

И еще один вариант, с противоположным эффектом.

  • СПИСОК В 3D ВАРИАНТЕ

  • Вариант оформления списка в трехмерном стиле, используя всего один класс

  • transform-style: preserve-3d

  • Еще элемент списка

  • И еще элемент списка

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Александр:

    Добрый день! Спасибо большое за статью! Подскажите пожалуйста, как при использовании Вашего "СПИСОК UL LI В 3D ВАРИАНТЕ" убрать размытие текста при хавере transform: scale(1.1);
    Уже перепробовал и backface-visibility: hidden; и translateZ(0), но ничего не помогает…

    Ответить
    • Alexander:

      Это от бразуеров зависит, у меня вот в Мозиле текст подпрыгивает даже немного, а в Хроме да, немного размывается.

      Попробуйте вариант наоборот.
      Т.е изначально будет transform: scale(0.9); а на ховере ставим в 1

      Ответить
      • Александр:

        Да, при меньшей разнице в scale размытие менее заметно. Но само размытие вызывает perspective. Я уже решил по другому данный момент. Спасибо за ответ!

        Ответить