css - Perspective not working on "to" transitions, but working on "back" transitions in Safari

Question

I've discovered this rather strange behavior of perspective in Safari. When using perspective on a transform: rotateY(180deg), the to rotation does not have the perspective applied, but the back rotation does. See the two gifs below:

Behavior on Safari. The first rotation does not have any perspective:

Compared to Firefox, where all rotations have the perspective applied:

The videos as an imgur album in case of problems with the gifs

I am using this piece of SCSS code:

.card {
    perspective: 150rem;
    -moz-perspective: 150rem;

    &__side {
        background-color: orangered;
        color: white;
        font-size: 2rem;
        height: 50rem;
        transition: all .4s;        
    }

    &:hover &__side {
        transform: rotateY(180deg);
    }
}

I've already tried numerous slight changes like using -webkit-perspective but with no success.

Here is a codepen containing the code: https://codepen.io/YellowTech/pen/rNmXemj

Am I overlooking something or how can this be fixed?

Thank you!

标签： csssasssafariwebkitwebkit-perspective

Answer 1

The animation is trying to transform to a rotation of 180deg, but on Safari it seems to want to know what it is transforming from. Perhaps other browsers assume an initial rotation of 0deg.

I can see perspective in action if the initial condition is set:

.cont {
  width: 300px;
}

.card {
    perspective: 150rem;
    -moz-perspective: 150rem;

    &__side {
        background-color: orangered;
        color: white;
        font-size: 2rem;
        height: 50rem;
        transition: all .4s; 
        transform: rotateY(0deg); /* ADDED */       
    }

    &:hover &__side {
        transform: rotateY(180deg);
    }
}