Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
53 replies
Danny

Having problem with transform-style: perserve-3d

I'm having this problem where i use transform-style: perserve-3d and it didn't have any effect on it, the document said that is apply to that children element,
- I tried !important
- Tried switch the properties to the parrent and it didn't work

I took this code base on Kevin video right here
- https://youtu.be/Z-3tPXf9a7M?si=NEaDee1qnK0GFEVd

Here is my code context
<div class="wrapper">
    <div class="effect3D" id="Item1">
        <div class="card">
            <h1>Introduction</h1>
            <hr>
            <p>Cotent.</p>
        </div>
    </div>
    
    <div class="effect3D" id="Item2">
        <div class="card">
            <h1>Projects</h1>
            <hr>
            <p>Content.</p>
        </div>
    </div>
    
    <div class="effect3D" id="Item3">
        <div class="card">
            <h1>Contact</h1>
            <hr>
            <p>Content.</p>
        </div>
    </div>


.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 4rem;

    height: 100vh;
}

.effect3D {
    display: flex;
    justify-content: center;
    align-items: center;

    height: auto;
    width: auto;

    padding: 2rem;

    padding-block: 2rem;
    transform-style: preserve-3d !important;
}

.card {
    width: 25rem;
    height: 30rem;

    border-radius: 1rem;

    background: 
        linear-gradient(
            145deg, 
            rgba(0, 139, 139, 0.5), 
            rgba(0, 0, 139, 0.5));
    
    backdrop-filter: blur(6px);

    position: relative;

    transition: var(--smooth);

    transform:
        perspective(5000px)
        rotateX(var(--rotateX))
        rotateY(var(--rotateY));
}

.card::before,
.card::after {
    content: "";
    border-radius: inherit;
    position: absolute;
}

.card::before {
    inset: -1.5rem;

    z-index: -1;

    background: linear-gradient(black, black);

    transform: translateZ(-50px);
}
YouTubeKevin Powell
3D Tilting Card Effect with Mouse Tracking // HTML, CSS & JS
🎓 CSS Demystified: https://cssdemystified.com/
🎓 I have other courses too: https://kevinpowell.co/courses/
Oh, and you can join my Discord community too if you’re interested: https://kevinpowell.co/discord

Viewport units are this thing that people learn about, and then go all-in with, but they’re actually not that great for most applications. S...
3D Tilting Card Effect with Mouse Tracking // HTML, CSS & JS
Was this page helpful?