szukam odtworzyć efekt takiego CSS 3D Transforms: Jak utworzyć stały się efekt 3D tekst z CSS3 przekształca
Jak to osiągnąć? Oto co mam do tej pory
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>
Pomyślałem, że gdybym obracany powierzchni tła 60 stopni i obracać tekst -60 stopni byłoby anulować efekt, ale najwyraźniej nie?
W każdym razie, z góry dzięki.
Nie możesz osiągnąć tego efektu, jeśli '' p'' jest dzieckiem '' .grid''. Powodem jest to, że transformacje '' p'' są następnie renderowane na powierzchni 3D '' .grid'', więc nie możesz uzyskać efektu "stałego", którego szukasz w ten sposób. Będziesz musiał zrobić z nich elementy rodzeństwa i upewnić się, że akapit jest wyświetlany na górze siatki przy użyciu bezwzględnego pozycjonowania. –