I'm looking to recreate an effect like this with CSS 3D Transforms:
How do I achieve this? Here's what I've got so far
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>
I thought that if I rotated the background surface 60 degrees and rotated the text -60 degrees it would cancel out the effect but apparently not?
Anyway, thanks in advance.
Yes, ther solution to your problem is using transform-style: preserve-3d.
But the problem with this is that IE does not support this property
A way to make it work in IE is to use a pseudo element on the 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>
After a bit of research, I am confident to post my own answer.
This effect can be achieved using the transform-style
property, and setting it to preserve-3d
. This would be set to the parent element (in this case, .grid). I also use transform-origin:bottom
to raise the text from inside the grid. Here's the snippet:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.