Den Mittelpunkt der Rotation in der Mitte machen

Ich versuche ein Element mit Animation zu drehen. Ich konnte das erfolgreich implementieren, aber das Problem ist, wenn es rotiert, dreht sich der Text in der div nicht von der Mitte, so dass es herauskommt, dass es ein bisschen wackelig ist.Den Mittelpunkt der Rotation in der Mitte machen

Wie kann ich den Mittelpunkt der Rotation in der Mitte der div machen?

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>

Quelle

2016-04-13 Horay

Der Grund ist, dass die tatsächliche Glyphe der Uhr nicht vertikal zentriert ist ... es ist ein Schriftproblem. Die "Uhr" ist eigentlich etwas nach oben geneigt - https://jsfiddle.net/w8qh4ehj/ –

@Paulie_D Ich denke, du hast es auf dem "Punkt" getroffen! Wie kann ich wissen, wie viele Pixel es aus? – Horay

Keine Ahnung, du musst es eine Weile spielen und sehen, was Trial & Error dir bringt. Ein paar Pixel der oberen Auffüllung könnten ungefähr richtig sein. –

line-height: 63.5px; gibt Ihnen 4 Pixel oben 4 Pixel unten gemessen mit Photoshop.

Quelle

2016-04-13 18:37:43

Danke! Ich habe es nur gemessen, die Oberseite ist 18 und die Unterseite ist 19 – Horay

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

Den Mittelpunkt der Rotation in der Mitte machen

Antwort

Verwandte Themen