Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
26 replies
Milner39

"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>


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


Any ideas are appreciated, thank you.
Was this page helpful?