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

One, write in the front of the autumn pants

As early as last year, I gave a big introduction to 2D transform related content. See the King of all know, the guy with D is not to mess with, 2D my generation still can cope, 3D words, hehe, estimated I wait long in the thousands of miles away by its domineering shock ~ ~

Look at the movements and expressions of the female emperor, you can know the name of the guy with D!

Some of the things that have recently been tossing the ipad have some 3D interactive effects. Some things, always think is a distant future, who knows what really happened when said to come, such as a heart to marry, for example, in the actual project toss 3D transform effect.

However, although the previous toss over 3D transform effect (WebKit), but are in accordance with gourd painting scoop, swallowed, really want to easily achieve the 3D effect, it is necessary to understand deeply, so, at this time of their own bitter force, tears ben ing ...

Wood There are ways to find information, their own thinking study Bai, when I see the following this basic picture, my right side of the thick eyebrows involuntarily shaking two, oh, hehe ~ ~

What does this look like, the nucleus? The arrows are so scary like the Octopus brothers!  Why is there a fly shot back there? CSS is so scary, I have to go back to my mom ...

Presumably most of the peers should be the same as me, no Einstein grandfather IQ, no photogenic need to take off the table dad. As a result, the information presented by the CSS3 3D transform is too dazzling to look directly at. What to do?

Well, Buddhism has clouds, Mount. Here, I will say from the perspective of mortals CSS3 3D transform some things, hope to say something more pro-people, do not scare everyone.

Second, first of all, the feeling of understanding

I think, to understand a thing, it is better to have some perceptual knowledge first.

The 3D transform effect in CSS3 is essentially the transformation of various postures in our Ooxx, also known as various postures.

Although they are adults, considering that there are still a lot of chicks to be kept in the nest, if the above explanations don't come up, think about these:
1. What are these people doing?

Diving? No, no, no!! Remember, they are not diving, is doing 3D transformation!!!

2. What is cute baby doing?

Calisthenics No, no, no!! Remember, he is not doing exercises, is doing 3D transformation!!!

3. came 2 times, the sister in this gesture called:

The sale of Moe? No, no, no!! Remember, he is not selling Moe, is doing 3D transformation!!!

Haha, whether to realize: in the display of the world, all the action (including the top of the giant milk on the brain caused by the sperm), are belong to the 3D transform transformation. Therefore, to learn and understand the 3D transform transformation is very simple, a word, to the real world to find something to map it.

Third, the breakthrough of Cognition: Rotatex, Rotatey, Rotatez

The following three methods are available in the 3D transform:

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )

Understand the three methods, the later more difficult to understand the perspective good, can be said to be a breakthrough!

rotateRotate the x-axis, rotate the rotateX rotateY y-axis, rotateZ rotate the z-axis ...

What x axis/y Axis Z axis, these words come out of my mouth, don't say you, I myself all dizzy ~ ~

Hurry up and find something to understand from the real world (refer to the following person's rotation):
Zou Kai's gymnastics horizontal bar movement is rotateX ;

Tsai's sister's pole dance is rotateY ;

The stunt of rotating knives is rotateZ .

Or do you understand? Well, suppose you're a man, with your girlfriend for example, if you were standing face to head with her, then you--
Push it from the front to the right rotateX ;

Let it in situ turn a 90 degrees to appreciate its side of the fullness of the curve is rotateY ;

Put the sister on the bed and lie on the side rotateZ .

So, the following CSS world in the simple 3D effect is not easier to understand it?!

ZXX: The following for advertising ~ ~ Please don't do not point ~ ~ Hee ~

Iv. Essential Perspective attributes

perspectiveThe Chinese meaning is: perspective, Perspective!

perspectiveThe existence of a property determines whether you see a 2-or 3-dimensional, that is, 2D transform or 3D transform. This is not difficult to understand, no perspective, not 3D.

We in junior high school to learn art, or school building students must have been exposed to some of the perspective of something:

However, the pivot point in CSS3 3D transform is different from the above two example graphs: CSS3 3D transform pivot point is in front of the browser !

Or do you understand that: the perspective point of the 3D effect element in the display is above the monitor (not the back), which is approximately where our eyes are!

For example, a 1680-pixel-wide display has a beautiful picture of a beauty, applied 3D transform, and the element or the element's parent element is set to a perspective size of 2000 pixels. The beauty of this beautiful multi-3D effect is the same as you personally in 1.2 display width of the place (1680*1.2≈2000) See the true effect of the same!!

V. Translatez help you find the perspective position

If you say rotateX / rotateY / rotateZ can help understand the three-dimensional coordinates, then you translateZ can help you understand the perspective position.

We all know that the principle of near and far is small, and the rotateX function of the element that is not as well rotateY translateZ is to let the element be in its immediate or near or far. Let's say we set the element perspective to 201 pixels, as follows:

perspective:201px;

Its child elements, the smaller the translateZ value, the smaller the child element size (because the element goes away, our eyes will be smaller); the larger the value, the larger the element is, and translateZ when the translateZ value is very close to 201 pixels, but not more than 201 pixels (such as 200 pixels), The size of the element will fill the entire screen (if the parent element does not have a overflow:hidden-like limit). Because of this time, the child element just moved to the front of your eyes, so-called "Isian, do not see Tarzan", that is the case. When the translateZ value becomes larger, more than 201 pixels, the element is invisible-it's good to understand: we can't see what's behind the eyes!

Another vivid description of the text is not as intuitive as an example, you can click here: Translatez method to help understand perspective perspective demo

It is recommended to access the Chrome browser, you can use the range control, the demo is better, as follows:-100 times the smallest, 200 times super fullscreen (vertical direction due to special layout restrictions not shown), 250 because the element is already outside the viewpoint, so is a blank (invisible).

Six, two kinds of writing of perspective attribute

perspectiveA property has two forms of writing, one used on the stage element (the common ancestor element of the animated element), and the second is written on the current animated element, with other properties of the transform. The following code example:

. stage {    perspective:600px;}

And:

#stage. Box {    transform:perspective (600px) Rotatey (45deg);}

You can click here: the Perspective property of the two writing demo

The result is the following thumbnail image:

From what we can seem to see, although the form of writing, property names are inconsistent, but the effect seems to be the same ~ ~ really is this???

In fact, the top two of the above demo effect is the same, because there is only one element on the stage, so there is a coincidence, it just behaves the same. If, if there are many elements on the stage, the difference in performance of the two writing forms will be displayed immediately!

You can click here: Perspective two kinds of writing comparison demo with multi-element stage

The demo page effect thumbnail is as follows (due to the background color random, may be different):

Well, the effect in the picture is not difficult to understand. The upper stage is the whole as a perspective element, so it is clear that the form of each child element we see is not the same, and below, each element has its own viewpoint, so, obviously, because the rotatey angle is the same, so the effect looks exactly the same!

About Chrome browser and perspective blind area
In Chrome, to see the full 3D effect, you also need the 3D transform element to be centered vertically on the form, so in Chrome, you have a two-position centered button that helps you see the effect you want:

When we change range the value of the first control to 200, you will see that the third element on the right is missing:

This is not difficult to understand, the front row door, each door is 1 meters, you are 2 meters from the door, show, when all the doors are open 45° angle, at this time, the middle door to the right side of the second door is just parallel to your line of sight, the door of the façade is obviously nothing to see. This is why the third door on the right of the top is a blank element--a specific angle of view and a visual blind area formed by distance.

Vii. understanding of Perspective-origin

perspective-originThis property is very well understood and represents the position of your double-eyed eyes. The default is the center of the stage or element you are looking at. Sometimes, we are not interested in the location of the center, we hope that the line of sight in some other places. Say:

A picture wins thousand words, the cock silk men this should all understand.

Here is a perspective of the actual application of the cube:

perspective-origin:25% 75%;

Eight, transform-style:preserve-3d

transform-styleProperties are also commonly used in 3D effects, with two parameters, the flat|preserve-3d former flat being the default value, representing the plane, and the latter preserve-3d representing a 3D perspective.

preserve-3dIn accordance with our real-world thinking knowledge. For example, you let her turn right 45 degrees, at this time sister head left 45 degrees think you spit tongue sell Meng, sister's face should and you are face to side parallel.

The element that applies the transform-style: preserve-3d claim does behave like this, but if you use the default flat value, its effect is--with my imagination limited--I can't think of it: The girl's face is 45 degrees to the left, and the head seems to move outside the body!

Therefore, basically, we want to achieve some 3D effect based on the actual experience, transform-style: preserve-3d is indispensable. In general, the Declaration is applied to the parent element of the 3D transform's sibling element, the stage element.

Nine, backface-visibility

In the show world, we can't go through soft sister A to see the soft sister B or C or d behind it; however, in the 3D world of CSS3, by default, we can see the elements behind (and do not know how to perspective sister's clothes ~)!

So, to be realistic, we often set this up so that later elements are not visible:

Backface-visibility:hidden;

Ten, the actual application-pictures of the carousel effect

You can ruthlessly click here: Picture of the Carousel effect demo

It is recommended to watch in enough new versions of Firefox browser or Safari browser, chrome may need to be centered to view, as an effect thumbnail:

Principle:
Those seemingly cool CSS3 3D effects actually prodded those properties (these are mentioned in this article), toss to toss, this effect is obviously the same.

First the HTML structure, as follows:

Picture pictures of stage    container        pictures ...        

For the stage, it's simple, add a visual range, say 800 pixels:

perspective:800px;

For containers, it is simple to add a 3D view declaration, as follows:

transform-style:preserve-3d;

Then there are the pictures. In order not to produce a helical effect like DNA, we make all position:absolute the images common to the same center point.

Obviously, the picture carousel is similar to the rotational movement of the pole dance, so we care about the rotateY size.

Because it is going to be just a circle, so the picture rotateY value just 0~360 equal, so, if there are 9 pictures, then the rotation angle of each picture will accumulate 40 (360/9 = 40) degrees. So there are:

Img:nth-child (1) {Transform:rotatey (   0deg);} Img:nth-child (2) {Transform:rotatey (  40deg);} Img:nth-child (3) {Transform:rotatey (  80deg);} Img:nth-child (4) {Transform:rotatey (120deg);} Img:nth-child (5) {Transform:rotatey (160deg);} Img:nth-child (6) {Transform:rotatey (200deg);} Img:nth-child (7) {Transform:rotatey (240deg);} Img:nth-child (8) {Transform:rotatey (280deg);} Img:nth-child (9) {Transform:rotatey (320deg);}

Is that a good thing?

No, no, no!!!

Think about that, although the 9 beautiful beauty of each person's position is not the same, but are standing at the same point, already squeezed into a group, a hood are squeezed into C, obviously not (see only set Rotatey)! We need to open up space ~ ~

How to open space, very simple.

Think about that: 9 beautiful women, respectively, face to the cardinal point of a total of 9 different directions, they as long as everyone forward a four-way walk, the space between the girls soon opened, the appearance of a round! Imagine the night sky, fireworks blooming Scene ~ ~

Here's a step forward, the smart person should already know, is mentioned in this article translateZ , when the translateZ positive value of the time, the elements will go to the direction they face, if the element is not rotated, it will go toward the monitor!!

Now there is only one question, how far will the beauties go??

This distance is calculated with a formula drop!

Take this demo distance, each beauty picture width is 128 pixels, therefore, has the following ideal position:

In red, r it is the ideal value of the picture in the demo page translateZ (this value can make all the pictures seamlessly surround a circle)!

rThe calculation is very simple, with junior high school mathematics level should be:

R = 64/math.tan (20/180 * Math.PI) ≈175.8

Demo page in order to look good, the picture left a little space between, using the translateZ value of 175.8 + 20 = 195.8 .

Finally, to let the Trojan spin up, as long as the container rotates 40 degrees each time it can.

Save space, the specific JavaScript operation code will not show, you are interested in viewing the demo page source code.

Understand the Carousel 3D effect principle, basically, some other 3D effects can be easily steered, therefore, the effect is worth your time to see the drip ~ ~

Xi. Well, the conclusion

Theoretically, the real world, and the 3-dimensional world of various regular motion effects can be achieved using the CSS3 transform 3D method. The end of the article Carousel effect can be said to be all kinds of strange effects in the bucket ~ ~ Other types have no effect on your brain on the idea. As for the realization, understanding, it is also a side dish. However, if you do not understand, purely from the online copy of the effect code, it will always be copy of life!

The article is already very long, my finger also knocks out the calluses to come, no longer wordy what. Hope this article of Jutting, show off, toss can let you learn CSS3 3D transform transformation of related things more relaxed point!

Haste, there are mistakes in the text are unavoidable, you are welcome to correct. Finally, thanks for reading and making progress together!

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=2592

(End of this article)

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