Today, I decided to delve into the world of CSS Transforms. With a desire to explore, I set out to create a mobile button using SVG and various transforms.
The challenge at hand is to rotate the mobile button by 90 degrees with a transform origin right at the center of the element.
Behold, 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>TASK: To establish the transform origin at the center of .mobileNav.
HICCUP: This objective seems beyond reach.
BROWSER: Running on Firefox version 44.0.2