मैंने सफारी में perspective के इस अजीब व्यवहार की खोज की है। transform: rotateY(180deg) पर perspective का उपयोग करते समय, टू रोटेशन में परिप्रेक्ष्य लागू नहीं होता है, लेकिन बैक रोटेशन करता है। नीचे दो gif देखें:

सफारी पर व्यवहार। पहले रोटेशन का कोई परिप्रेक्ष्य नहीं है:

Behavior on Safari

फ़ायरफ़ॉक्स की तुलना में, जहां सभी घुमावों में परिप्रेक्ष्य लागू होता है:

Behavior on Firefox

gifs के साथ समस्याओं के मामले में एक imgur एल्बम के रूप में वीडियो

मैं एससीएसएस कोड के इस टुकड़े का उपयोग कर रहा हूं:

.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);
    }
}

मैंने पहले ही कई छोटे बदलावों की कोशिश की है जैसे -webkit-perspective का उपयोग करना, लेकिन कोई सफलता नहीं मिली।

यहां एक कोडपेन है जिसमें कोड है: https://codepen.io/YellowTech/pen/rNmXemj

क्या मैं कुछ देख रहा हूं या इसे कैसे ठीक किया जा सकता है?

शुक्रिया!

0
Mr.Yellow 19 अगस्त 2021, 18:46

1 उत्तर

सबसे बढ़िया उत्तर

एनीमेशन 180 डिग्री के रोटेशन में बदलने की कोशिश कर रहा है, लेकिन सफारी पर ऐसा लगता है कि यह जानना चाहता है कि यह किससे बदल रहा है। शायद अन्य ब्राउज़र 0 डिग्री के प्रारंभिक घूर्णन को मानते हैं।

मैं कार्रवाई में परिप्रेक्ष्य देख सकता हूँ अगर प्रारंभिक शर्त सेट है:

.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);
    }
}
1
A Haworth 19 अगस्त 2021, 23:45
ओह वाह यह एक दिलचस्प बात है जिसने इसे ठीक किया। आपका बहुत बहुत धन्यवाद! एक अन्य संभावित समस्या (विशेषकर पूर्ण स्थिति का उपयोग करते समय) यह है कि जब कार्ड की ऊंचाई 0 होती है, तो परिप्रेक्ष्य भी काम नहीं कर सकता है। इसके लिए सावधान रहें।
 – 
Mr.Yellow
19 अगस्त 2021, 23:58