3d Layer Effect: CSS Tutorial (Day 26 of CSS3 in 30 Days)

thanks a lot, was finding it really hard to grasp 3d rotation till I watched this vid

You just introduced me with 3d css..in a surprisingly smooth way

Finally found Atom!!

👌🏻👌🏻👌🏻👌🏻🙏🏻🙏🏻🙏🏻🙏🏻🌸🌸🌸🌸🌸

The images in dropbox was not like you described in the vedio,it's totally different from the lecture

Thanks!

To solve the problem with the weird transition he shows in the end (when you hover, come out and hover again), add the fallowing highlighted line to your code:

.layers img {
position: absolute;
max-width: 100%;
height: 100%;
transition: all ease 1600ms;
transform-style: preserve-3d;
transform: perspective(1200px);
}

Love from Turkey

Beautiful !!

At first, I was upset you didn't let us know how to fix that glitch(super expanding) but I am truly grateful that you didn't (after I figured it out of course).

It has to do with the phone example. When it's close it's huge.

I believe the issue here is,
The transition means all css properties changing in the specified duration.

In this example, initially, there's no transform at all. But later on, on hover, transform perspective() is set to 1200px which was nothing or 0 before.

Hence the transition starts from perspective(0px) [the closest] and zooms out to the specified value 1200px

To fix this, in the main style itself, set the transform to perspective(1200px), and then there won't be any animation on the perspective.

You can set the initial perspective to a closer number (eg 1100px or 1300px) to get a zoom in/out effect.

It is easy to understand you. Thanks dude

thank you so much <3

Please fix video description and links! 😉

Cool! (From Germany)

This was the first time that my mind was blown by CSS :O Omg that effect at beginning is so cool!

where is 25th video???

im gonna miss this when its over :c

code link is wrong

ALSO why didn't you use transform-origin property?

Sliding Panels Code links to day 25 code......?

wrong vid description???

how do you get that corshair selector in your browses when you select stuff? Is it a MAC thingy or is it a browser extension?

Love from india