Transform Rotate Menu Item Circular Menu - html

Question

I have modified a circular menu that I found on this pen
But I am having trouble rotating the menu items around the main circle. By default of this pen, the button's bottom part is perpendicular to it's relative position, but since I changed them with font icons, they look upside down or crooked.
I'm a CSS noob, so I need some help please, been at this for hours!
I've tried a couple of things like:
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
or something like
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
}
None of them seems to be working. Currently my component looks like this:
Here is my full CSS and 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>
EDIT: I don't know why the button looks like an ellipse in the code snippet, but let's ignore this for this argument's sake. It looks fine on my app :)

Answer 1

This has fixed your rotation problem. please check my code.
I have added after each li and set rotation in after, here is the code what I added.
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);
}
And this is your full code.
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);
}
And here is the 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>

Answer 2

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>
wrap your list content in a block element or inline element like i did! and rotate this element 180deg!

Answer 3

This will fix your rotation problem.
li a {
transform :rotate(180deg);
}
Also if you need a proper circular design for + icon, you need to fix width and height for .menu class in CSS as follow:
width: 30px;
height: 70px;