CSS Schriftgröße Skalierung Jitter

Question

Ich versuche, Schriftgrößen zu skalieren, um einen Fischaugenlinseneffekt bei Hover zu erstellen.

Die Verwendung von CSS zur Erhöhung der Schriftgröße mit Übergang verursacht einen Jitter-Effekt.

Die Verwendung der Transformationsskala erzeugt einen unerwünschten Effekt, bei dem sich die linke Seite des Textes etwas vor dem Skalieren nach links bewegt.

Ich habe einen Stift erstellt, um die 2 Effekte nebeneinander darzustellen. Idealerweise würde ich mit der Glätte des Rechts auf die Wirkung auf der linken Seite wie

https://codepen.io/sygad1/pen/QMWqXy

Irgendwelche Ideen, diese zu erreichen?

Prost

HTML

<ul class="fish-eye-text-size"> 
    <li>Font size scaling</li> 
    <li>Menu item one</li> 
    <li>Menu item two</li> 
    <li>Menu item three</li> 
    <li>Menu item four</li> 
    <li>Menu item five</li> 
    <li>Menu item six</li> 
    <li>Menu item seven</li> 
    <li>Menu item eight</li> 
    <li>Menu item nine</li> 
    <li>Menu item ten</li> 
    </ul> 

    <ul class="fish-eye-scaling"> 
    <li>CSS scaling</li> 
    <li>Menu item one</li> 
    <li>Menu item two</li> 
    <li>Menu item three</li> 
    <li>Menu item four</li> 
    <li>Menu item five</li> 
    <li>Menu item six</li> 
    <li>Menu item seven</li> 
    <li>Menu item eight</li> 
    <li>Menu item nine</li> 
    <li>Menu item ten</li> 
    </ul> 

SCSS

//Text size 
.mediumText { 
    font-size:1.4rem; 
} 
.largeText { 
    font-size:1.7rem; 
} 



// CSS Scaling 
.mediumScale { 
    transform: scale(1.3); 
    transform-origin: 0% 50%; 
} 
.largeScale { 
    transform: scale(1.5); 
    transform-origin: 0% 50%; 
} 




ul { 
    margin:0 auto; 
    padding:0; 
    list-style:none; 
    width:250px; 
    overflow:hidden; 
    float:left; 
    margin:20px; 
    background:#e1e1e1; 

    li { 
    cursor: pointer; 
    transition:all 0.4s; 
    height:30px; 
    position:relative; 
    padding:10px; 
    will-change: transform; 
    } 

} 

JS

// Font size 
$(".fish-eye-text-size li").on("mouseenter", function() { 
    $(this).addClass("largeText"); 
    $(this).next().addClass("mediumText"); 
    $(this).prev().addClass("mediumText"); 
}); 

$(".fish-eye-text-size li").on("mouseleave", function() { 
    $(this).removeClass("largeText"); 
    $(this).next().removeClass("mediumText"); 
    $(this).prev().removeClass("mediumText"); 
}); 

// CSS Scaling 
$(".fish-eye-scaling li").on("mouseenter", function() { 
    $(this).addClass("largeScale"); 
    $(this).next().addClass("mediumScale"); 
    $(this).prev().addClass("mediumScale"); 
}); 

$(".fish-eye-scaling li").on("mouseleave", function() { 
    $(this).removeClass("largeScale"); 
    $(this).next().removeClass("mediumScale"); 
    $(this).prev().removeClass("mediumScale"); 
}); 

Answer 1

In Ihrem zweiten Beispiel ändert die Transformation Ursprung implizit auf schweben von Standard 50% 50% bis 0% 50%, daher das Zittern. Sie sollten transform-origin: 10px 50%; (10px statt 0, weil wir die Position des ersten Buchstabens, nicht die Polsterung äußere Kante, also setzen wir den Transformationsursprung auf die innere Kante des Padding-Bereichs) to the default state of li fixieren und aus .mediumScale/.largeScale Klassen entfernen .