How to set a rotation point on a nested SVG Element - html

Question

Recently, I decided to experiment and learn about CSS Transforms. Now, I decided to try and make a common mobile button using SVG and a few transforms.
What I'm trying to do is to make the mobile button rotate 90 degrees with a transform origin on the very center of the element.
Here is my code:
.mobileNav {
display: block;
transition: .5s;
}
.mobileNav:hover {
transform: rotate(90deg);
transform-origin: 50% 50%;
/*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */
}
ul {
float: right;
margin: 15px 50px 0px 0px;
}
li {
display: inline-block;
transition: .5s;
}
<ul class="mobileNav">
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />
Sorry, your browser does not support inline SVG.
</svg>
</li>
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />
Sorry, your browser does not support inline SVG.
</svg>
</li>
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />
Sorry, your browser does not support inline SVG.
</svg>
</li>
</ul>
GOAL: To set the transform origin to the center of .mobileNav.
PROBLEM: I am unable to achieve this.
BROWSER: My browser is Firefox 44.0.2

Answer 1

ul has defaut padding or margin that needs a reset.
li and svg could be reset to inline-block.
Lets draw a border for debug to see where things stand.
vertical-aign + line-height will help to define an height to ul and will set childs at vertical middle.
body {
margin-top:50px;/* snippet wants this */
}
.mobileNav {
display: block;
transition: .5s;
border: solid;
padding: 0
}
.mobileNav:hover {
transform: rotate(90deg);
}
ul {
float: right;
margin: 15px 50px 0px 0px;
line-height: 1em;
}
li,
svg {
display: inline-block;
vertical-align: middle;
transition: .5s;
}
<ul class="mobileNav">
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
</svg>
</li>
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
</svg>
</li>
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
</svg>
</li>
</ul>

Answer 2

Your problem is the default padding. For added effect, you can also set the SVG and li's to not be display inline or inline-block. Then float them so the align vertically. That should make it not as janky.
body {padding: 3em;}
.mobileNav {
display: block;
transition: .5s;
padding: 0;
}
.mobileNav:hover {
transform: rotate(90deg);
transform-origin: 50% 50%;
/*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */
}
ul {
float: right;
margin: 15px 50px 0px 0px;
}
li {
display: inline-block;
transition: .5s;
}
.mobileNav svg, .mobileNav li {
display:block;
float:left;
}
<ul class="mobileNav">
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />
Sorry, your browser does not support inline SVG.
</svg>
</li>
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />
Sorry, your browser does not support inline SVG.
</svg>
</li>
<li>
<svg x="0px" y="0px" width="10" height="20">
<circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />
Sorry, your browser does not support inline SVG.
</svg>
</li>
</ul>