Everything associated with 3D goes up in complexity. But it is also normal, after all, there is an extra dimension, to have the dignity of three.
How do I write 3D Transforms? Can you write the flip effect? Can you write the effect of turning over books? Can you write a pop-up book effect? Click in. It’s all in here.
In many cases, simply transforming elements in two dimensions is clearly not the end of the human race. After all, 12 dimensions may not be the limit.
It’s the 21st century, and we’re still talking about two-dimensional spatial interfaces from 30 years ago, said David DeSandro, author of Intro to 3D Transforms. Luckily for 2011, we had CSS3, and we also made 3D Transforms, which was a big event to talk about.
Transform 2d 3d
The 3D transformation has more z-axis in the coordinate system than the 2D transformation, which means that objects can move forward and backward as well as up and down, left and right. Rotate in 2D is similar to rotateZ in 3D.
So, can you achieve 3D by simply extending the parameters of transform out of the Z dimension? I saw CSS3 smile.
Perspective concept understanding
What is a perspective? In the dictionary it is translated as viewpoint, perspective, perspective. It’s a very abstract concept that requires a bit of spatial imagination.
Let’s first put aside this concept, try to use the knowledge points just said to try to flip (yi) effect, smart you must be minute code out:
|
|
But put a browser, this is not right ah, why use 3D code to write 2D effect.
Here’s our perspective.
Those who have learned sketching must be familiar with the concept of perspective, which is the basis for ensuring the truth and rationality of sketching.
Video: Point perspective, part of perspective
In such a system, Perspetive in CSS3 represents the distance between the element and the viewer. Figuratively speaking, it is the intensity of the 3D effect of the element. The vanishing point of 3D effect in CSS3 is fixed. What changes is the distance between the viewer and the elements. However, the perspective value is inversely proportional to the intensity of the 3D effect. The larger the value, the less obvious the 3D effect of the element is — a 2000px perspective means you are looking at a distant object, while 100px means it is right in front of you.
Here’s a diagram that might help us visualize the idea of 3D intensity
(Photo credit:wikipedia)
If you still don’t understand, another option is to view the 3D effect while adjusting the perspective value in the browser.
The vanishing point
Review images
(Photo credit:Intro to CSS 3D transforms – Perspective)
The elements in both the left and right pictures are rotated 45 degrees around the Y axis, but the difference is obvious. The right picture is more likely to remind people of a window opened collectively in the picture. The problem with the left image is that each element has its own vanishing point at the center of the element, while the right image has its vanishing point at the center of the solid box. This is done by transferring the element’s Perspetive Settings to the element’s parent container.
At this point, this kind of simple 3D is actually enough for many non-3d design touch screen pages, a little use can produce extraordinary results, such as the D Rose touch screen case introduced in issue 1.
People with a good eye would say, well, you can draw a cube like this. I saw CSS3 smile again.
Establish a three-dimensional space system
Reality is always cruel
With the Perspetive property, we were at best a bunch of guys who sketched on paper, too young to build models by hand. If you flip over the parent card, no matter how much you flip over, all you see is the front of the card, because the system is a sketch painting, and you take a realistic sketch and flip it to the back, you still can’t see the back of the real thing. The key to surpassing flat 3D is the transform-style: Preserve-3D attribute setting, which defaults to Flat, or “sketch work.” This property is set to tell the child elements what spatial architecture rules to follow. This attribute cannot be inherited, so it must be declared on the parent element whenever a child element needs to set the spatial schema rule.
It saves a lot of work to have the browser handle spatial rules for us, you don’t have to worry about hierarchy, you don’t have to worry about which elements disappear where they go and which elements appear where they go. Well, I’ve never done that myself, ever.
From flipping cards to flipping books
Flipping cards is what the emperor does. We intellectuals have to flip books. Just flip cards are in the middle of the square as the axis of the transformation, we change the origin of the transformation, turned into pages in the turn.
A closed book is normally on the right side of the Y-axis, and each page contains two sides. That is to say, a book is composed of several page-turning effects, and the transformation origin of each page is on the left side of the element. This can be on the basis of a quick turn over the book demo (sharp stamp view turn over the book demo).
The use of shadows makes turning the book look more realistic
(Click to view the demo)
The Hard Level of 3D animation: pop-up books
Pop-up Book is full of “Surprise! Feeling. This mode of reading beyond traditional graphic books is often used in children’s books.
(Photo credit:A Guided Tour of THE MEL BIRNKRANT COLLECTION)
It’s a little exciting to think about using CSS3 to do this.
First, create a pop-up book rule:
When the book opens, the elements start and the elements stand up at a speed less than or equal to the opening speed of the page. The folding of the elements does not expose the edges of the book. The relationship between the elements is not natural.
(Mozzilla small demo)
Xiaobian once made a frantic stereo book touch screen page, due to the characteristics of the left and right pages of the stereo book are related to each other, the way of turning cards is not suitable for here, here is another more troublesome way — unlike the before and after the two pages in the way of turning cards, the left and right pages here belong to a 3D system. Control hierarchy by translateZ value transformation, because in 3D system, Z-index has been abandoned.
Jabber into: Wheat promotion page
Terminal support
Because so far, CSS3 3D function is still in the showy stage, Android and iOS support effect is different and difficult to reconcile, from the above case can be seen by the eye pit, so except for simple 3D conversion, it is not recommended to use 3D deep function in large scale in large projects.
3D with hardware acceleration
Legend has it that using 3D attributes triggers hardware acceleration on the device, making the browser perform better. But it depends on the situation
Imagine gPU-accelerated animation as Vin Diesel driving Dominic’s iconic car, the Dodge Charger. Its custom 900 HP engine allows it to go from 0 to 60 yards in a flash. But what good is it if you drive it on a crowded highway? In this case, your choice of vehicle Charger is correct. But the problem is you’re on a congested freeway. — “The Pros and cons of CSS Hardware Acceleration”
So don’t be greedy, the number of 3D effects to control within a certain range, page performance is the most important. Advice from a small editor who learned the hard way
References:
Transforms Intro to CSS3 3D transforms by David DeSandro — Transforms Intro to CSS3 3D transforms by David DeSandro — Transforms Intro to CSS3 3D Transforms by David DeSandro — Transforms 3D Transforms by David DeSandro
Perspective (Graphical) — For those who still have a smatterof Perspective, see the wiki for details.
Unfolding the Box Model: Exploring the CSS 3 d Transforms by Chris Ruppel – very nice 3 d Transforms, the transition from 2 d to 3 d, start the associative learning method, a see understand, afraid you don’t see.
The pros and cons of CSS hardware acceleration – there are a lot of things that can’t be explained in one sentence or two, but you don’t need to say a word or two to understand the principles.
CSS3 Animation Development Manual tween Animation of CSS3 Animation Frame by frame Animation of CSS3 Animation 3D Animation of CSS3 Animation