Danny Posts - Answer Overflow

Danny

•Created by Danny on 1/15/2024 in #front-end

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>

<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);
}

.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);
}

54 replies

Gaming

Programming