CSS3 defines the rotation center point of an animation

If we do not use transform-origin to change the position of the origin of the element, the rotation, shift, and scale operations performed by CSS deformation are all deformed at the position of the element's own center (deformation origin). However, many times we need to deform the element at different positions, so we can use transform-origin to change the origin position of the element, so that the origin of the element is not in the center of the element, so as to achieve the desired origin position. If we set the element's transform-origin to 0(x) 0(y), the element's transform origin is converted to the left corner of the element.

Changing the x-axis and y-axis values of the transform-origin property can reset the origin position of the element's deformation, and its basic syntax is as follows, and the property values can be specific values such as percentage, em, px, etc., or keywords such as top, right, bottom, left, and center. The transform-origin property in a 2D deformation can be a single parameter value or two parameter values. If there are two parameter values, the first value is used to set the position of the horizontal x-axis, and the second value is used to set the position of the vertical y-axis.

The transform-origin property in the 3D deformation also includes a third value for the z-axis. The following table describes the values of each value: x-offset:

It is used to set the offset of the horizontal x-axis of transform-origin, which can be a sum value, a positive value (a horizontal x-axis offset to the right from the center point), or a negative value (a horizontal x-axis offset from the center point to the left). offset-keyword: is a keyword in top, right, bottom, left, or center, which can be used to set the offset of transform-origin.

y-offset: This is used to set the offset of the transform-origin property on the vertical y-axis, which can be a sum value, which can be either positive (the offset from the center point along the vertical y-axis downward) or negative (the offset from the center point along the vertical y-axis). x-offset-keyword：

is a keyword in left, right, or center that can be used to set the offset of the transform-origin property value on the horizontal x-axis. y-offset-keyword: is a keyword in top, bottom, or center, which can be used to set the offset of the transform-origin property value on the vertical y-axis.

z-offset: used to set the distance of the transform-origin away from the user's eye point of view in the 3D deformation, the default value is z=0, and its value is OK, but it will be invalid here.

divtransform: rotate(45deg);

transform-origin:20% 40%;Defines the center point of rotation for the animation

ms-transform: rotate(45deg); /* ie 9 */

ms-transform-origin:20% 40%; /* ie 9 */

webkit-transform: rotate(45deg);Safari and Chrome

webkit-transform-origin:20% 40%;Safari and Chrome

moz-transform: rotate(45deg); /* firefox */

moz-transform-origin:20% 40%; /* firefox */

o-transform: rotate(45deg); /* opera */

o-transform-origin:20% 40%; /* opera */

transform-origin: x-axis y-axis z-axis;Value Description.

x-axis

Defines where the view is placed on the x-axis. Possible values:

left center

rightlength

y-axis

Defines where the view is placed on the y-axis. Possible values:

top center

bottom

length

z-axis

Defines where the view is placed on the z-axis. Possible values:

length

Run this paragraph and debug the values of each property to understand.

1. First of all, create a new HTML5 document and complete the basic ** writing, as shown in the following figure.

2. Then create a new rectangular layer with a length of 100 pixels and a height of 50 pixels with a red background.

3. Then set the rectangular layer to an ellipse by entering the "border-radius:50% 50%" attribute as shown in the figure below.

4. The next step is to rotate the ellipse, and use "transform:rotate(30deg)" to rotate the ellipse by 30 degrees.

5. In this way, the ellipse is rotated with CSS3, and the preview is completed as shown in the figure below.

How to implement login on one web page for event works Registration form switching? 14 minutes to take you to use CSS+JS to achieve cool sliding switching effects.

1. First of all, create a new HTML blank document, named CSS3 animation, and save it.

2. Then write the HTML structure, only a div element is needed, and the class name is img

3. Set the border to different colors, and set the width of the border to 100px.

4. Because it is a ring, we used the rounded corner effect of CSS3, and set the rounded corner to 50%, that is, border-radius: 50%, take a look at the effect.

5. The next step is the key step, and it also happens that the game is to add animation effects. Enter the following.

6. Let's take a look at the final effect, it's still good.

Ask questions logically, describe the needs clearly, and match the pictures that cannot be expressed in words, otherwise others will not know what you want.

First of all: axial.

There are 3: x, y, and z, all of which can be understood as the center of a certain direction, and you want to revolve around which root?

Do you want to rotate up on the global axis or up on the local axis, or both on the global and local axes?

If you want to rotate everything, it's like the earth rotates.

Revolution, so when you rotate, the direction is the same as the revolution, or is it reversed or random?

If the problem description is not clear, there are many possibilities, if you ask:

Animation is sufficient.

Start by giving a name with a div. Like what.

Then use CSS to define the motion frames you do.

The second one: 15s is that you do this animation and do it for 15s, which you decide.

The third: 4 is the number of times. If infinitely looped with infiniteking

Then I did the exercise, but there were many people who finished it and didn't know why they couldn't move. Because a lot of people don't remember to name themselves, like start

keyframes start

Setting the value of ritatez will do the trick.