KPC
Kevin Powell - Communityā€¢11mo ago
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>
<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);
}
Kevin Powell
YouTube
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...
37 Replies
Danny
DannyOPā€¢11mo ago
incase of im not giving enough context here is my code https://jsfiddle.net/v1xp9s6j/ sorry for my bad english tho,
3D Tilting Card - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
clevermissfox
clevermissfoxā€¢11mo ago
you need to give perspective on the parent . ive found that adding preserve-3d up the chain can help too. you need it on your wrapper at least and possibly body. im not a 3d expert, im learning but i dont believe "perspective" is a property on transform; they are rotate , scale, skew, and translate. perspective is its own property. 
body {
  perspective: 1000px; 
  transform-style: preserve-3d; 
}
body {
  perspective: 1000px; 
  transform-style: preserve-3d; 
}
if that transform: perspective; is not a valid value, the entirety of your transform will be thrown out (including the rotate).
Danny
DannyOPā€¢11mo ago
oh ok, i'll try too looking into that, thanks you for the advice :D
clevermissfox
clevermissfoxā€¢11mo ago
not totally sure what youre trying to accomplish here but now when i hover on your cards, they are rotating. I took off the perspective on the transform, added perspective to the .wrapper and added preserve-3d to both wrapper and background
Danny
DannyOPā€¢11mo ago
yeah sr, i'm trying to get the background gradient (like the red and blue gradient in the Kevin video) rotate at the same time tho, but i cant get the effect apply
clevermissfox
clevermissfoxā€¢11mo ago
im not able to watch the video to see what you mean but if you still need help, someone will come along or ill be back later. just let us know what the element the background-gradient is on that isnt rotating for you
Danny
DannyOPā€¢11mo ago
will do, thanks you for taking your time helping :D
clevermissfox
clevermissfoxā€¢11mo ago
it does seem to be working if youre talking about the before element? its rotating with its parent .card
Danny
DannyOPā€¢11mo ago
the rotation of the card is working fine, i was taking about the 3d perspective i'm adding another background and sent it back -50px 
.card::before {
  translateZ(-50px)
}
.card::before {
  translateZ(-50px)
}
clevermissfox
clevermissfoxā€¢11mo ago
yes, the before element is rotating with the card if thats what you mean. you may need to translate it back more than 50px if youre going for the effect i think you are.
Danny
DannyOPā€¢11mo ago
yea, i just tried -100px -200px -5000px, it didn't apply the effect on tried it on a .card .effect3D doesn't seem to change i've looked at the Devtool and there was no properties of transform-style: perserve-3d kinna weird
clevermissfox
clevermissfoxā€¢11mo ago
it is spelled "preserve" if maybe thats the problem, but if so it would be crossed out, not just missing altogether. so tell me again, what element is it and what is it not doing that you want it to do if its rotating like it should
Danny
DannyOPā€¢11mo ago
sorry typo, i just switch the properties transform: preserve-3d into the .effect3D and i think is working again, but the script.js is broken now, i trying to fix the script so, i'll let you know oh yeah and i'm trying to get the first image .effect3D::before element that rotate the same at the .effect3D element like this where and the .effect3D::before send back -50px like this picture the problem that i'm having right now on the second image is the rotation of both doesn't rotate anymore, not spitting out error too
No description
No description
Danny
DannyOPā€¢11mo ago
i'll let you know when i'm going insane thumbup
clevermissfox
clevermissfoxā€¢11mo ago
My mistake on the perspective under the transform. I double checked mdn and didn't see it but kp uses it in this video so I trust him šŸ¤£ learn something new every day! If anyone else is interested "The perspective() transform function is part of the transform value applied on the element being transformed. This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space"
Danny
DannyOPā€¢11mo ago
no worries šŸ‘, i find that Kevin video are super clear with his code, you know sometime he is not perfect but for myself his code is understandable and i do improve or expand base on his code, give myself alot of fun doing that šŸ˜„ sometime get stuck alot, but i'm believing myself
clevermissfox
clevermissfoxā€¢11mo ago
his channel is so so awesome, im itching for him to cover some more about the newer APIs like view-transitions and scroll-driven animations! and now that popovers have support in all major browsers, that would be a fun one. Are you using the same js library he uses inthat video where he brings in the <pre> tag? or just using the styles from the video
Danny
DannyOPā€¢11mo ago
Hey nice looking forward into that! matter in fact, i'm currently building my second landing page and thinking i'll use view-transitions and scroll-driven animations, remember he did cover some basic CSS from scratch about animation-timeline: scroll() or view() kidda cool ! He doesn't use any JS library or did i miss something? and the <pre> tags he was using to get the element on (prismjs.com)[https://prismjs.com/], yeah i was using his 3D effect šŸ˜ƒ So the thing is my 1st attempt was to replicate the exact same code as Kevin show me, trying to understand and it work! but the thing is Kevin JS code apply only 1 element or first element and the position offset is always at the middle of the page. The 2nd attempt (the thing i'm doing now) was to apply the all the element has specific class, get the position element, width + height element, doing calculation and it work for every single element but the transform-style: preserve-3d don't apply for some reasons. kidda warping my head from yesterday i just fix the 3D effect but the style doesn't apply again
clevermissfox
clevermissfoxā€¢11mo ago
Oh I see. I was skipping through the video and misunderstood that it was a javascript library. Yes I have watched those KP videos a few times but make sure you're looking into the documentation as a lot of the syntax for scroll-driven animations has changed since those older videos. For example now you don't use 1s animation-duration , it's just auto (bc a time period makes no since if it's triggered on scroll). There's some really helpful tools for animation-range since there's a lot of keywords. A bunch of the links and demos can be found here https://scroll-driven-animations.style/
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations
clevermissfox
clevermissfoxā€¢11mo ago
Have you applied the transform-style: preserve-3d up the tree? When it's not working I throw it on the child, parent and grandparent selector. And have you applied perspective to the top level? Not the transform: perspective function but the perspective property itself "The perspective() transform function is part of the transform value applied on the element being transformed.This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space" There's another one of KPs vids on 3d that may be helpful , let me look for it
clevermissfox
clevermissfoxā€¢11mo ago
https://youtu.be/FeJEEE3zc4U?si=q-rWRFCXA2xLTfDp
Kevin Powell
YouTube
Create a 3D flipping animation with HTML and CSS
I'm a fan of minimlism in my designs, but since I stumbled across transform-style and some of the fun things that it opens up, I've been playing around a lot with some 3D stuff in CSS of late. In this video I take a dive into how transform-style works in letting child elements stay in the 3D space instead of flat in their parent, as well as how...
Danny
DannyOPā€¢11mo ago
this is really amazing, thanks you so much okie, let me try to add the properties in the child/parent and see what happen, i'll let you know. yeep, i'll do the research, thanks you again šŸ˜„
clevermissfox
clevermissfoxā€¢11mo ago
If you need more help, explain more about what selector you're working on and what you WANT it to do and what exactly it's not doing and there are great folks in here that can help.
Danny
DannyOPā€¢11mo ago
will do
clevermissfox
clevermissfoxā€¢11mo ago
I went through this video and one thing he did say that stuck out to me is if your red/blue pseudo element is translate: transformZ(-50px), the shadow pseudo element needs to be at least transformZ(-49px) or it will just go behind the gradient element. Also putting outlines on things helps to see where they are if you canā€™t see them and make sure they are positioned relative to the container you want it to be. Stacking contexts get confusing esp when they are implicit from using transforms and stuff
Danny
DannyOPā€¢11mo ago
i did aware Kevin said that, but this is kidda different from what he said, so i just found out that the translateZ(-5000px) really big number and the ::before element get really small, so the translate is working i assume, round it down to the transform-style: preserve-3d the value right now is flat and i cant get it change
clevermissfox
clevermissfoxā€¢11mo ago
My point was that whatever the furthest elements value is, Everything in front of it has to be less at least by 1px And you have the transform-style up the tree?
Danny
DannyOPā€¢11mo ago
i did, sorry if is frustrating, let me show the image
Danny
DannyOPā€¢11mo ago
so the gray area was the ::before element
No description
No description
No description
Danny
DannyOPā€¢11mo ago
oh hold on
Danny
DannyOPā€¢11mo ago
i also try put in the .container-card
No description
Danny
DannyOPā€¢11mo ago
this is the result
No description
Danny
DannyOPā€¢11mo ago
hey @hartā¤šŸ”„, thanks for helping me finally fix the issue that i'm having, and i don't know why what causing it, i just delete the code and start over from that section here is the result thumbup
No description
clevermissfox
clevermissfoxā€¢11mo ago
Great job! Sometimes thatā€™s the best way to go ; just delete it and start over Just to clarify, when I said up the tree, I meant it has helped me to put it on the child AND parent AND grandparent; not take it off the child to put into parent. Doesnā€™t hurt anything to have it on more than one selector, thatā€™s whatā€™s telling it to live in a 3D space. Ad the perspective property would go on the top level, at least the container , if not the wrapper or the body . And on a separate issue, if things get glitchy try using the translate3d(0 0 0) function to basically jumpstart the GPU
Danny
DannyOPā€¢11mo ago
was really that my fault hehe, sorry oh and if you talking about the glitchy color, that just the program i was using, the color gradient is fine in my screen, nothing glitchy is just a program. weird, when using the backdrop-filter: blur(10px) it goes back to the same issue assuming that was the problem ?
clevermissfox
clevermissfoxā€¢11mo ago
Iā€™m not sure , I havenā€™t been able to pry out of you WHAT the issue or problem youā€™re having is other than ā€œpreserve-3dā€ isnā€™t working šŸ¤£ I didnā€™t notice any glitchy, just saying if you do encounter glitchiness, thatā€™s the silver bullet
Danny
DannyOPā€¢11mo ago
haha aight! thanks you for giving me advice along the way I am now able to have a good sleep šŸ¤£ ok, i'll keep in mind
Want results from more Discord servers?
Add your server