कैसे बनाने के लिए CSS3 के साथ एक खड़े 3 डी पाठ प्रभाव बदल देती है

Question

मैं सीएसएस 3D ट्रांसफ़ॉर्मेशन के साथ इस तरह एक प्रभाव को पुनः उत्पन्न करने के लिए देख रहा हूँ:

मैं यह कैसे प्राप्त करते हैं? यहां क्या है मैं अब तक

body { 
 
    perspective: 400px; 
 
    transition: perspective 1s; 
 
} 
 
.grid { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-image: url("http://i.imgur.com/3ACizko.jpg"); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 400px; 
 
    transform: rotateX(60deg); 
 
    margin: 0 auto; 
 
    transition: transform 1s; 
 
    perspective: 400px; 
 
} 
 
.grid p { 
 
    transition: transform 1s; 
 
    transform: rotateX(-60deg); 
 
}

<div class="grid"> 
 
    <p>Hello</p> 
 
</div>

मैंने सोचा कि अगर मैं पृष्ठभूमि सतह 60 डिग्री -60 डिग्री घुमाया और पाठ घुमाया यह प्रभाव समाप्त होता लेकिन जाहिरा तौर पर नहीं मिल गया है?

वैसे भी, अग्रिम धन्यवाद।

Answer 1

हाँ, आपकी समस्या का समाधान वहाँ बदलने शैली उपयोग कर रहा है: की रक्षा-3 डी।

लेकिन इस के साथ समस्या यह है कि आईई इस संपत्ति

एक तरह से यह IE में काम करने के लिए समर्थन नहीं करता है पी

.grid { 
 
    font-size: 30px; 
 
    position: relative; 
 
    left: 100px; 
 
    top: 200px; 
 
    perspective: 200px; 
 
    perspective-origin: 0% 50%; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 200px; 
 
    top: -100px; 
 
    left: -100px; 
 
    transform: rotateX(30deg); 
 
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 47px, black 47px, black 50px), 
 
    repeating-linear-gradient(90deg, transparent 0px, transparent 47px, black 47px, black 50px); 
 
    }

<p class="grid">Hello</p>

Answer 2

कुछ शोध के बाद, मुझे अपना जवाब पोस्ट करने में विश्वास है।

यह प्रभाव transform-style संपत्ति का उपयोग करके प्राप्त किया जा सकता है, और इसे preserve-3d पर सेट किया जा सकता है। यह मूल तत्व (इस मामले में, .grid) पर सेट किया जाएगा। मैं ग्रिड के अंदर से पाठ को बढ़ाने के लिए transform-origin:bottom का भी उपयोग करता हूं। यहाँ टुकड़ा है:

body { 
 
    perspective: 400px; 
 
    transition: perspective 1s; 
 
} 
 
.grid { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-image: url("http://i.imgur.com/3ACizko.jpg"); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 400px; 
 
    transform: rotateX(60deg); 
 
    margin: 0 auto; 
 
    transition: transform 1s; 
 
    perspective: 400px; 
 
    transform-style:preserve-3d; 
 
} 
 
.grid p { 
 
    transition: transform 1s; 
 
    transform-origin:bottom; 
 
    transform: rotateX(-60deg); 
 
}

<div class="grid"> 
 
    <p>Hello</p> 
 
</div>