CODEWITHSUNDEEP
javascripthtmlcss
Wreigh
Wreigh

Reputation: 3297

CSS transform-scale not working properly

This is my code

// turn a pie into a nav menu (make it smaller)
// this is triggered when a pie should be turned into a nav
function beNavPie(pie) {
    $(pie).css("transform", "scale(0.3)");
    $(pie).css("transform-origin", "initial");
}
// turn a nav menu into a pie (revert it to original size)
// this is triggered when the nav is clicked
function pieFromNav(nav) {
    $(nav).css("transform", "scale(1)");
    $(nav).css("transform-origin", "initial");
}

As you can see in the gif below, it's working fine. But the turn is: Every pie's first time to be a nav menu(a small one), the transition path curves, after that, it's transition will not already have path curves. here is jsfiddle: https://jsfiddle.net/q3jytbkr/

here is sample

enter image description here

A longer look

enter image description here

Upvotes: 3

Views: 3300

Answers (1)

Phil
Phil

Reputation: 165059

Problem is you are transitioning all properties, including transform-origin. Change your CSS from

.show-pie {
    visibility: visible;
    transition: .3s;
}

to

.show-pie {
    visibility: visible;
    transition: transform .3s;
}

https://jsfiddle.net/q3jytbkr/1/

Alternatively, you could just set the transform-origin to initial before you start changing the scale.

Upvotes: 3

Related Questions