Come creare un effetto di testo 3D in piedi con Css3 trasforma

Question

sto cercando di ricreare un effetto come questo con CSS Transforms 3D:

Come faccio a raggiungere questo obiettivo? Ecco quello che ho finora

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>

ho pensato che se ho ruotato la superficie di fondo 60 gradi e ruotato il testo -60 gradi sarebbe annullare l'effetto, ma a quanto pare non?

In ogni caso, grazie in anticipo.

Answer 1

Sì, ther soluzione al vostro problema sta usando trasformare-style: preserve-3d.

Ma il problema è che IE non supporta questa proprietà

Un modo per farlo funzionare in IE è quello di utilizzare un elemento pseudo sul p

.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

Dopo un po 'di ricerca, sono fiducioso di pubblicare la mia risposta.

Questo effetto può essere ottenuto utilizzando la proprietà transform-style e impostandola su preserve-3d. Questo sarebbe impostato sull'elemento genitore (in questo caso, .grid). Io uso anche lo transform-origin:bottom per aumentare il testo dall'interno della griglia. Ecco il frammento:

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>