Пункт меню «Преобразование поворота» Круговое меню
Я изменил круговое меню, которое нашел на этой ручке Но у меня возникают проблемы с вращением пунктов меню по основному кругу. По умолчанию у этого пера нижняя часть кнопки расположена перпендикулярно ее относительному положению, но так как я заменил их значками шрифта, они выглядят перевернутыми или кривыми.
Я новичок в CSS, поэтому мне нужна помощь, пожалуйста, занимаюсь этим часами!
Я пробовал пару вещей, таких как:
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
или что-то вроде
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
}
Кажется, ни один из них не работает. В настоящее время мой компонент выглядит так:
Вот мой полный CSS и HTML...
menu {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #2e7bbd;
margin: -45px 0 0 -45px;
position: fixed;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
right: 2%;
bottom: 2%;
z-index: 99999;
}
menu:before, menu:after {
content: "";
z-index: 2;
position: fixed;
width: 3px;
height: 22.5px;
cursor: pointer;
background-color: #fbfdff;
top: 50%;
left: 50%;
}
menu:before {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
menu:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
menu li {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
width: 59.4px;
height: 59.4px;
margin: -29.7px 0 0 -29.7px;
opacity: 0;
text-align: center;
font-size: 18px;
font-family: Helvetica, sans-serif;
font-weight: 100;
line-height: 59.4px;
color: #fbfdff;
border-radius: 50%;
background-color: #428dce;
list-style-type: none;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
}
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
animation-name: crazy;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
menu li li:nth-of-type(2) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu li li:nth-of-type(3) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-delay: 0s;
}
menu:hover li {
transition-delay: 0.1s;
opacity: 1;
}
menu:hover li:nth-of-type(1) {
-webkit-transform: rotate(359deg) translate(0, 90px);
transform: rotate(359deg) translate(0, 90px);
}
menu:hover li:nth-of-type(2) {
-webkit-transform: rotate(310deg) translate(0, 90px);
transform: rotate(310deg) translate(0, 90px);
}
menu:hover li:nth-of-type(3) {
-webkit-transform: rotate(260deg) translate(0, 90px);
transform: rotate(260deg) translate(0, 90px);
}<!--<menu>
<li><i className = "fas fa-bell"></i></li>
<li><i className = "fas fa-cog"></i></li>
<li><i className = "fas fa-terminal"></i></li>
</menu>-->
<menu>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>Обновлено: Я не знаю, почему кнопка выглядит как эллипс в фрагменте кода, но давайте проигнорируем это ради этого аргумента. В моем приложении это выглядит нормально :)
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
523
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
menu {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #2e7bbd;
margin: -45px 0 0 -45px;
position: fixed;
width: 30px;
height: 70px;
border-radius: 50%;
cursor: pointer;
right: 2%;
bottom: 2%;
z-index: 99999;
}
menu:before, menu:after {
content: "";
z-index: 2;
position: fixed;
width: 3px;
height: 22.5px;
cursor: pointer;
background-color: #fbfdff;
top: 50%;
left: 50%;
}
menu:before {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
menu:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
menu li {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
width: 59.4px;
height: 59.4px;
margin: -29.7px 0 0 -29.7px;
opacity: 0;
text-align: center;
font-size: 18px;
font-family: Helvetica, sans-serif;
font-weight: 100;
line-height: 59.4px;
color: #fbfdff;
border-radius: 50%;
background-color: #428dce;
list-style-type: none;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
}
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
animation-name: crazy;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
menu li li:nth-of-type(2) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu li li:nth-of-type(3) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-delay: 0s;
}
menu:hover li {
transition-delay: 0.1s;
opacity: 1;
}
menu:hover li:nth-of-type(1) {
-webkit-transform: rotate(359deg) translate(0, 90px);
transform: rotate(359deg) translate(0, 90px);
}
menu:hover li:nth-of-type(2) {
-webkit-transform: rotate(310deg) translate(0, 90px);
transform: rotate(310deg) translate(0, 90px);
}
menu:hover li:nth-of-type(3) {
-webkit-transform: rotate(260deg) translate(0, 90px);
transform: rotate(260deg) translate(0, 90px);
}
li a {
transform :rotate(180deg);
display:block;
}<menu>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</menu>оберните содержимое списка в блочный или встроенный элемент, как это сделал я! и поверните этот элемент на 180 градусов!
Это решит вашу проблему с вращением.
li a {
transform :rotate(180deg);
}
Также, если вам нужен правильный круговой дизайн для значка +, вам нужно исправить width и height для класса .menu в CSS следующим образом:
width: 30px;
height: 70px;
да, но при этом каждый элемент в списке поворачивается на 180 градусов
—
30.05.2019 16:54
Ответ принят как подходящий
Это устранило вашу проблему с вращением. пожалуйста, проверьте мой код.
Я добавил после каждого li и установил вращение после, вот код, который я добавил.
menu li i{
content: "1";
display: flex !important;
align-items: center;
justify-content: center;
transform-origin: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 100%;
}
menu li:nth-of-type(1) i {
transform: rotate(180deg);
}
menu li:nth-of-type(2) i {
transform: rotate(230deg);
}
menu li:nth-of-type(3) i {
transform: rotate(280deg);
}
И это ваш полный код.
menu {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #2e7bbd;
margin: -45px 0 0 -45px;
position: fixed;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
right: 2%;
bottom: 2%;
z-index: 99999;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
menu:before, menu:after {
content: "";
z-index: 2;
position: fixed;
width: 3px;
height: 22.5px;
cursor: pointer;
background-color: #fbfdff;
top: 50%;
left: 50%;
}
menu:before {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
menu:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
menu li {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
width: 59.4px;
height: 59.4px;
margin: -29.7px 0 0 -29.7px;
opacity: 0;
text-align: center;
font-size: 18px;
font-family: Helvetica, sans-serif;
font-weight: 100;
line-height: 59.4px;
color: #fbfdff;
border-radius: 50%;
background-color: #428dce;
list-style-type: none;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
}
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
animation-name: crazy;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
menu li li:nth-of-type(2) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu li li:nth-of-type(3) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-delay: 0s;
}
menu:hover li {
transition-delay: 0.1s;
opacity: 1;
}
menu:hover li:nth-of-type(1) {
-webkit-transform: rotate(359deg) translate(0, 90px);
transform: rotate(359deg) translate(0, 90px);
}
menu:hover li:nth-of-type(2) {
-webkit-transform: rotate(310deg) translate(0, 90px);
transform: rotate(310deg) translate(0, 90px);
}
menu:hover li:nth-of-type(3) {
-webkit-transform: rotate(260deg) translate(0, 90px);
transform: rotate(260deg) translate(0, 90px);
}
menu li i{
content: "1";
display: flex !important;
align-items: center;
justify-content: center;
transform-origin: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 100%;
}
menu li:nth-of-type(1) i {
transform: rotate(180deg);
}
menu li:nth-of-type(2) i {
transform: rotate(230deg);
}
menu li:nth-of-type(3) i {
transform: rotate(280deg);
}
А вот HTML
<menu>
<li><i class = "fas fa-bell"></i></li>
<li><i class = "fas fa-cog"></i></li>
<li><i class = "fas fa-terminal"></i></li>
</menu>
С помощью этого кода я вижу три элемента в правильном направлении, но с красным фоном и содержимым: "1".... когда я удаляю цвет фона, содержимое не остается равным 1, оно возвращается к значкам но они все еще вверх ногами. То же самое происходит, когда я удаляю содержимое: "1" из меню li::after объявления. Я запутался.
—
30.05.2019 16:06
пожалуйста, проверьте эту ссылку, я создал в codepen ваш потрясающий значок шрифта codepen.io/manishankat/pen/arQLmY?editors=1100
—
31.05.2019 07:40
И я изменил свой ответ, пожалуйста, проверьте еще раз
—
31.05.2019 07:48
Другие вопросы по теме
Межбуквенный интервал CSS вместе со сквозной строкой
Проблема с анимацией выпадающего меню react-native-material при клике
Как экспортировать HTML в документ без рамки или цветного текста
Почему при загрузке изображения не отображается текст предварительного просмотра изображения?
Установить ширину раскрывающегося списка ng-multiselect
Скрыть элемент с помощью JQuery и активировать кнопку
IE Flexbox не учитывает размер дочернего flexbox
Базовый javascript не работает должным образом
Как привязать класс к более чем двум параметрам в Vue.js?
Создайте адаптивную таблицу с помощью flexbox
Похожие вопросы
Межбуквенный интервал CSS вместе со сквозной строкой
Как получить идентификатор элемента, когда я нажимаю на элемент
Как экспортировать HTML в документ без рамки или цветного текста
Как отправить прамы через почтовую функцию в jquery?
Мне нужно, чтобы страница, созданная JS, отображала некоторый код из родительского окна
Почему при загрузке изображения не отображается текст предварительного просмотра изображения?
Глобальная функция Onclick с локальным параметром
Есть ли способ навсегда отключить кнопку начальной загрузки после одного щелчка на стороне сервера с помощью PHP?
Добавление элемента DOM путем изменения innerHtml div предотвращает его обнаружение позже с помощью getElementById?
IE Flexbox не учитывает размер дочернего flexbox
добавьте
box-sizing:border-box, чтобы избежать эффекта эллипса