Merkezde dönüş merkezi noktası oluştur

Bir öğeyi animasyonla döndürmeyi deniyorum. Bunu başarılı bir şekilde uygulayabildim, ancak sorun, döndürüldüğünde, div'daki metin ortadan dönmüyor, bu yüzden biraz titriyor.Merkezde dönüş merkezi noktası oluştur

Dönüşün merkez noktasını div'un ortasında nasıl yapabilirim?

JSFiddle

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">&#128339;</span> 
 
    <span id="title">History</span> 
 
    </div> 
 
</div>

kaynak

2016-04-13 Horay

Bunun nedeni, saatin gerçek glifinin dikey olarak ortalanmamasıdır ... bu bir yazı tipi sorunudur. 'Saat' aslında biraz üst üste doğru önyargılı - https://jsfiddle.net/w8qh4ehj/ –

@Paulie_D Ben 'nokta' üzerine vurmak düşünüyorum! Kaç pikselin kapalı olduğunu nasıl bilebilirim? – Horay

Hiçbir fikrim yok, bir süre oynamalı ve hangi denemenin ve hatanın size geldiğini görmelisiniz. En üstteki dolguların birkaç tanesi sağda olabilir. –

satır yüksekliği: 63.5px; size 4Pixel üst 4piksel alt verir photoshop ile ölçülen.

kaynak

2016-04-13 18:37:43

Teşekkürler! Sadece ölçtüm, üst 18 ve alt 19. – Horay

https://jsfiddle.net/purL5mz9/2/ – Horay

Merkezde dönüş merkezi noktası oluştur

cevap

İlgili konular