OK, CSS3 3D transform transform, that's it!

By zhangxinxufromhttp://www.zhangxinxu.com This article address: http://www.zhangxinxu.com/wordpress/?p=4720 One, the effect demo first ~ Parallax scrolling effect Everyone may have heard, basically JS implementation, there is a corresponding plug-in –parallax.js. In fact, if you are not very high on compatibility requirements, such as ignoring IE browser, then we can use a few simple lines of CSS code to achieve the Parallax scrolling effect. For the effect of the show, first look at the effect is the most interesting, stimulate learning enthusiasm, as follows (ie9+): You can ruthlessly click here: pure CSS implementation of the Parallax scrolling effect demo into the demo scroll scroll bar, the best mouse slowly drag, the effect is more obvious-- Small icons such as emoticons and flowers flying the parallax sensation above the phone picture. Currently, browsers such as Chrome and Firefox (browsers that do not include IE11) are effective. Second, the principle principle of the implementation of the CSS is very simple, the following key CSS declarations play a role (red highlights):. Container {/* scrolling container */perspective:1px; padding:0; Height:calc (100vh-300p x); Overflow:auto;}. The parent of Box {/*/parallax element requires 3D view */height:1280px; transform-style:preserve-3d; position:relative;}. Background {/* scrolling relatively slow background elements */position:absolute; left:50%; Transform:translate3d ( -50%, -120px, -1px) scale (2);} You can notice that the red highlighted code above appears as a 1px (from perspective), a -1px (from transform) and a scale (2) of 2. What is the relationship between these numbers? Let's take a look at this 3D perspective (from here): When we are in front of the screen 1 units, look at the back of the screen 1 units of elements, the naked eye can see the size of the actual image is only 1/2, that is, the so-called near-large far small. At this point scale (2) enlarges the content to twice times the original, just like the original size on the plane. Although the human eye can see a volume of 1:1, but the shift in the rolling time is still 1:2, it should be well understood. To give an extreme example, we sit on the battery of the moon in the sky, although the car at a speed of 40 yards ran, but, as if the position of the moon is notMove, always on top of the head. The 3D in the Web page is the 3D effect that simulates the real world, so there is also this disparity experience. Or so, CSS3 3D natural parallax effect, scrolling, is just a trigger condition for parallax. So, dear classmates. What if you want to achieve 3-layer parallax scrolling? Very simple, to a Transform:translatez ( -2px) Try ~ Three, the conclusion according to my test, the direct body or HTML scrolling seems to be difficult to achieve the parallax scrolling effect, but it is late, I did not delve into, interested in the small partners can study share under. OK, just like the magic of gorgeous surprise, after decryption, will find mediocre. I wonder if you have successfully decrypted the secret of CSS parallax scrolling? Thanks for reading, Welcome to Exchange! This article is the original article, will update the knowledge point frequently and fix some errors, so reproduced please keep the original source, convenient traceability, avoid the misleading knowledge of old mistakes, and have a better reading experience. Address: http://www.zhangxinxu.com/wordpress/?p=4720 (the end of this article)

OK, CSS3 3D transform transform, that's it!