I have implemented an animation to rotate an element, but the issue is that the text within the div does not rotate from the center, causing it to appear a bit wobbly.
Is there a way to ensure that the center point of the rotation is in the middle of the div?
var container = document.getElementById('container'),
buttonContainer = document.getElementById('buttonContainer'),
button = document.getElementById('button');
buttonContainer.addEventListener('click', expandElem);
function expandElem(e) {
toggleClass(button, 'expand');
}
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, function(match) {
if (match.match(/^\s.+\s$/) !== null) return ' ';
else return '';
});
}
}
function toggleClass(element, className) {
if (!element || !className) return;
if (hasClass(element, className)) removeClass(element, className);
else addClass(element, className);
}#buttonContainer {
cursor: pointer;
width: 100px;
height: 100px;
font-size: 20px;
font-weight: bold;
margin: auto;
color: white;
}
#button {
width: 60px;
height: 60px;
line-height: 60px;
font-size: 50px;
display: inline-block;
transform: rotate(0deg);
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
#button.expand {
transform: rotate(630deg);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#container {
margin: auto;
top: 5vh;
background-color: #03A9F4;
border-radius: 25px;
width: 100px;
max-width: 100px;
height: 100px;
text-align: center;
transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}<div id="container">
<div id="buttonContainer">
<span id="button">🕓</span>
<span id="title">History</span>
</div>
</div>