3d Layer Effect: CSS Tutorial (Day 26 of CSS3 in 30 Days)
video description
Date: 2022-03-14
Related videos
Comments and reviews: 3
Truth
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.
reply
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.
reply
Wellington
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);_--
-
reply
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);_--
-
reply
SneakyJay
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?
reply
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?
reply
Add a review, comment
Other channel videos
