HeyItsFinn
HeyItsFinn
PostsComments
KPCKevin Powell - Community
Created by HeyItsFinn on 8/2/2023 in #front-end
"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.
27 replies