CSS3 Animated Properties Transform example tutorial

Whether you are the front-end or the designer, I believe you in the Web page two-dimensional operation has been handy, JS processing time line animation has already been well-known in the chest. Starting today, I share some "new" things, the third dimension of the Web page, and the animations of the pure CSS implementation. Confined to space, from the beginner to the more complex 3D animations will probably say three or four rounds, we start from the initial level of things to say, because most of this knowledge is personally based on the documentation I understand, mainly as notes. Therefore, may be with many students understand the different, or even contrary, I hope you can point out the article below the wrong place, we come together to learn.

Before we used absolute positioning, we had preliminary contact with the z-axis, which was just a simple cascade and now introduces a more powerful property: Transform.

Literally, Transform is the meaning of the variant, and his values mainly include rotating rotate, twisting skew, scaling scale, moving translate, and matrix morphing.

This time I mainly take rotate to write an example, because he can better cooperate with the back part of the 3D, the other several parameters we just need to replace each other, you can understand their usage.

There are three ways to rotate in 3D Transform, Rotatex (angle) x-axis rotation, rotatey (angle) y-axis rotation, Rotatez (angle) z-axis rotation.

XYZ represents the axis in which a plane rotates with coordinates, and the value inside is his angle. In order to be more image, please look at this picture

Transform:perspective (800);

Or use the Perspective property directly:

perspective:800;

Perspective can be written on the canvas (parent element) or directly on the element itself, with little difference when there is only one variant of the canvas. But when there are multiple variants on a canvas, the difference between the two formulations is immediately displayed. Like this picture, the yellow part, perspective directly on the color block, the purple part, perspective written on the parent container, with the canvas as the perspective element, so the shape of the child elements are not the same.

The value of the perspective determines the intensity of the 3D deformation effect, which is roughly understood to be near or far. The bigger you are, the farther away you are from the object. Like a cube that is far away from you (such as a Rubik's Square) in the rotation, his visual effect is relatively weak, but if the Rubik's Cube in front of your eyes, then the effect is relatively strong.

And here we'll use a new transform parameter, Translatez.

The front Rotatez has let us find the z-axis, and the Translatez can be used to handle the coordinates of the z-axis. Let the elements in their eyes or near or far. His value is to refer to the perspective value of the parent element.

For example, if the perspective value of the parent element is 800, the smaller the value of the child element Translatez, the farther away the child element is, the smaller it looks. When the translatez of the child element is close to 800 but less than 800, such as 790 +, then this element will fill the entire screen (note, will exceed the browser), because this time indicates that this element has come to your eyes, the front is a small leaf can also block the back of everything. When the child element exceeds 800, it means that the element has reached the back of our eyes, and we cannot see what is behind the head of our head, and the elements will disappear.

(A little mention here, we above the three plane rotation of the figure, we can see in the Y or Y axis of rotation to 90 degrees, the figure disappears, this is because the plane of 90 degrees is parallel to our line of sight, the surface is no thickness, so it will disappear.) When the angle becomes larger, it will re-appear, and this becomes a blind area. ）

After simply talking about the perspective, look at an attribute Perspective-origin, the perspective origin.

This property is very well understood, that is, the location of the pivot point, if you will use Flash, then perspective-origin is equivalent to flash inside the alignment point, when you do animation processing, the element will revolve around this alignment point. The default Perspective-origin in CSS3 is the center of the element.

When there is a perspective, after the variant, it should be used to transform-style this attribute, he has two parameters, flat and preserve-3d. Flat is the default value, which represents a plane, while the latter preserve-3d represents a 3D perspective.

You can simply understand that this is the way to open 3D space:

transform-style:preserve-3d;

Just the switch, this property will not have any effect on our screen unless you use flat.

Another principle in the 3D world is that you cannot penetrate an object to see the object behind him, unless the object is transparent, here we use a property, Backface-visibility, when his value is hidden, is the normal 3D world, when not writing this property .... I suggest you try it.

Now the simple geometrical principle has, we can let the plane 3D process dynamic demonstration, is CSS3 Animation!

Before we know animation, we have to understand another special thing, Keyframes.

Here used flash students can understand, is the key frame, each key frame represents the animation of a process node, KeyFrames has its own grammar rules, his name is "@keyframes" beginning, followed by the "name of the animation" plus a pair of curly braces "{}" , the parentheses are some of the different time-period style rules, a bit like our CSS style. For example:

@-moz-keyframes name{     0% {       -moz-transform:rotatey (0deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);     }     25% {       -moz-transform:rotatey (90deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);     }     50% {       -moz-transform:rotatey (180deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);     }     75% {       -moz-transform:rotatey (90deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);     }     100% {       -moz-transform:rotatey (0eg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);     }  }

Here, name is the title of the animation, the percentage inside as long as the write you want to implement the animation on the line, you can write displacement Ah, color value changes Ah, transparency changes ah and so on.

Then let's take a look at several common properties of animation:

Animation-name: ' name ';/* animated property name, which is the animated name we defined earlier keyframes */animation-duration:2s;/* animation duration */ animation-timing-function:linear;/* animation frequency, there is a constant speed, first fast after slow    linear: Animation to uniform motion ease: Default value, start slow, middle fast, end slow, asymmetrical ease-in: Start slow, Back quick ease-out: Start fast, back slow ease-in-out: Start slow, middle fast, end slow, symmetric (note the difference from ease) Cubic-bezier (n,n,n,n): can use Cubic-bezier custom speed, n value from 0 to 1* /animation-delay:2s;/* Animation delay Time */animation-iteration-count:1;/* define the loop data, infinite is infinite */animation-direction:alternate ;/* Defines how animations are animated, and normal animations only play forward. The alternate animation plays an odd number of iterations and plays back an even number of iterations in reverse. In the reverse playback cycle, the values associated with the animation-timing-function are also reversed. */

These attributes, which can be understood literally, are not explained in detail, and are used in the examples to be the most visually visible. Here is an example of a simple planar rotation, in this case, the WebKit core browser processing variants and animation is obviously the best, and Moz will appear with visible aliasing.

  <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
View Code

Aside: I hope you don't delay learning new things because of the incompatibility of the following versions of IE9, it will be a step slower than others. Also, starting with Safari, the browser can already trigger hardware acceleration by 3D functions.