Geek asks and answers

Z-index vs translate3D in Chrome

I decided to use:

* {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

when I saw that it makes my animations smoother, perhaps because it speeds up hardware acceleration. But I also need to do some tweaks z-indexto put the figure in front of the text so that maskthis text is at some point in the animation. The fact is that my (gray) form should move, synchronize with another figure (green in the example below), which is located behind the text.

I built a simple example to make it more visual. It works fine in Firefox, but I just can't get it to work with Chrome and Safari. Well, this works if I delete the translate3d thing, but since my actual project requires a lot of sliding and smooth animations, the user experience will suffer if I do this.

+5
source share
2 answers

Got! We can use the CSS clip property to mask the text and update the rect values ​​based on a different position of the object. Here is some w3schools.com/cssref/pr_pos_clip.asp information . This link is quite insightful and http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties .

, , , http://iuqo.com. , , ( ) . , .

0

translate3D DOM node ( ) ( ) ( ), , , z- . , z, , - ( ). ? , .

, translate3d "*", " " , "" translate3d, . , z - "" . , DOM node , z / node.

, , , z, DOM. , , , . , 3D- z, , -.

( z-index ! , . .)

+4

More articles:


All Articles