Kevin Powell - Community•16mo ago

"transform: translateZ" not working as intended even when "transform-style: preserve-3d" is set

I'm having difficulties following Kevin's "3D tilting card Effect..." tutorial, I have a container that follows the mouse perfectly but I want the children of the container to have a translateZ set so they look like they are hovering above the container, the problem I am having is that, even when "transform-style: preserve-3d" is set on the container, the translateZ property on the children is not working as intended, children just seem to scale up. I have a layout comparable to this in my main svelte file

<div class="container">
    <div class="child">
        <div class="sub-child"/>
        <div class="sub-child"/>
    </div>
    <div class="child"/>
    <div class="child"/>
</div>

<div class="container">
    <div class="child">
        <div class="sub-child"/>
        <div class="sub-child"/>
    </div>
    <div class="child"/>
    <div class="child"/>
</div>

and this is the relevant sass

.container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}

.container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}

Any ideas are appreciated, thank you.

19 Replies

HeyItsFinn•16mo ago

this is what I see when translateZ is set to 50px

HeyItsFinn•16mo ago

HeyItsFinn•16mo ago

and this is it set to 500px

HeyItsFinn•16mo ago

HeyItsFinn•16mo ago

as you can see, something is happening but rather than the children moving along the z axis, it just looks like they are spilling over the edges of the container

rishit•16mo ago

ig z-index wud be what ur looking for in this case bit im not sure

HeyItsFinn•16mo ago

its not even if it was positioned absolute, the children would always be on top

rishit•16mo ago

are u using isolation:isolate;?

HeyItsFinn•16mo ago

no, should that be on the container or the children?

rishit•16mo ago

HeyItsFinn•16mo ago

which one?

rishit•16mo ago

container

HeyItsFinn•16mo ago

alr 1 sec no change, whats that supposed to do?

rishit•16mo ago

its supposed to isolate the z indexs of the container from the rest of the pg

HeyItsFinn•16mo ago

yeah ok, pretty certain z indexes aren't relevant in this context tried it tho

rishit•16mo ago

can u give the whole code

HeyItsFinn•16mo ago

<script>
    import { onMount } from "svelte"

    onMount(() => {
        const mouseTracking = Array.from(document.getElementsByClassName("track-mouse"))

        console.log(mouseTracking)

        document.addEventListener("mousemove", (event) => {
            mouseTracking.forEach((element) => {
                rotateElement(element, event)
            })
        })

        const rotateElement = (element, event) => {
            const x = event.clientX
            const y = event.clientY
            
            const middleX = window.innerWidth / 2
            const middleY = window.innerHeight / 2

            const offsetX = (x - middleX) / middleX
            const offsetY = (y - middleY) / middleY

            const maxX = 30
            const maxY = 30

            const rotationX = offsetX * maxX
            const rotationY = offsetY * maxY

            element.style.setProperty("--rotateX", rotationX + "deg") 
            element.style.setProperty("--rotateY", -1 * rotationY + "deg")
        }
    })
</script>

<script>
    import { onMount } from "svelte"

    onMount(() => {
        const mouseTracking = Array.from(document.getElementsByClassName("track-mouse"))

        console.log(mouseTracking)

        document.addEventListener("mousemove", (event) => {
            mouseTracking.forEach((element) => {
                rotateElement(element, event)
            })
        })

        const rotateElement = (element, event) => {
            const x = event.clientX
            const y = event.clientY
            
            const middleX = window.innerWidth / 2
            const middleY = window.innerHeight / 2

            const offsetX = (x - middleX) / middleX
            const offsetY = (y - middleY) / middleY

            const maxX = 30
            const maxY = 30

            const rotationX = offsetX * maxX
            const rotationY = offsetY * maxY

            element.style.setProperty("--rotateX", rotationX + "deg") 
            element.style.setProperty("--rotateY", -1 * rotationY + "deg")
        }
    })
</script>

<img src="/background.jpg" alt="background" class="background">

<div class="frontground">
    <div class="web-container glass track-mouse"> //The parent that tracks mouse
        <div class="side-bar glass"> //The children that aren't transforming properly
            <div class="profile glass">
                <div class="main">
                    <div class="avatar glass"/>
                    <div class="username glass">
                        <h4>@Finn Milner</h4>
                    </div>
                </div>
                <div class="about glass">
                    <h3>Thanks for visiting my portfolio!</h3>
                </div>
            </div>
            <div class="sections">
                {#each Array(6) as _}
                <div class="section glass"/>
                {/each}
            </div>
        </div>
        <div class="container">
            {#each Array(9) as _}
            <div class="glass"/>
            {/each}
        </div>
    </div>
</div>

<img src="/background.jpg" alt="background" class="background">

<div class="frontground">
    <div class="web-container glass track-mouse"> //The parent that tracks mouse
        <div class="side-bar glass"> //The children that aren't transforming properly
            <div class="profile glass">
                <div class="main">
                    <div class="avatar glass"/>
                    <div class="username glass">
                        <h4>@Finn Milner</h4>
                    </div>
                </div>
                <div class="about glass">
                    <h3>Thanks for visiting my portfolio!</h3>
                </div>
            </div>
            <div class="sections">
                {#each Array(6) as _}
                <div class="section glass"/>
                {/each}
            </div>
        </div>
        <div class="container">
            {#each Array(9) as _}
            <div class="glass"/>
            {/each}
        </div>
    </div>
</div>

<style lang="scss">
.web-container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}
</style>

<style lang="scss">
.web-container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}
</style>

this is in a svelte file so some of the syntax might be weird if you have never seen it Solution: "backdrop-filter: blur()" is not compatible with "transform: translateZ()" for some reason. If any element had the blur property, the entire thing would flatten.

Londonpeteharrison•6mo ago

I'm having a similar problem. I use a box-shadow, is that this "backdrop-filter:blur()"? I couldn't see that in the code above, so wondered if this is what's causing none of my translateZ to work

Chris Bolson•6mo ago

I don't think that that is true. If you can provide the code in a Codepen it might be easier for somebody to take a look.

Gaming

Programming

"transform: translateZ" not working as intended even when "transform-style: preserve-3d" is set