Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "css3 attribute transform-origin how to use", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "css3 attribute transform-origin how to use" this article.

Transform is a transformation attribute in CSS3. The commonly used methods are translate (translation), rotate (rotation), skew (tilt) and scale (zoom). While transform-origin is not an attribute value of transform, it has an independent syntax, but it is worth noting that transform-origin must be used with transform, which can also be seen from the name, that is, to set a reference point for various actions set by transform. By default, the action reference point of the element is the center of the element box. Transform can be set for nine positions. There are three values for left | center | right in the horizontal direction and three values in the vertical direction, which are top | center | bottom, so there are a total of nine.

Syntax:

Transform-origin: [| | left | center ① | right] [| | top | center ② | bottom]?

Default value: 50% 50%, the effect is equivalent to center center

Applicable to: all block-level elements and some inline elements

Value:

Specifies the coordinate value as a percentage Can be negative.

Specifies the coordinate value with the length value Can be negative.

Left: specifies that the Abscissa of the origin is left

Center ①: specifies that the Abscissa of the origin is center

Right: specifies that the Abscissa of the origin is right

Top: specifies that the ordinate of the origin is top

Center ②: specifies that the ordinate of the origin is center

Bottom: specifies that the ordinate of the origin is bottom

Description:

Sets or retrieves objects to be converted at a certain origin.

This property provides two parameter values.

* *-if two are provided, the first is for Abscissa and the second is for ordinate.

If only one is provided, the value will be used for Abscissa, and the ordinate will default to 50%. **

The corresponding script feature is transformOrigin.

Compatibility:

Transform attribute

By default, the origin of the deformation is at the center point of the element, or 50% of the element's X and Y axes, as shown in the following illustration:

When we do not use transform-origin to change the origin position of the element, the rotation, shift, scaling and other operations of CSS deformation are all deformed at the center of the element (deformation origin). But many times we need to deform the element in different locations, so we can use transform-origin to change the origin of the element, so that the origin of the element is not in the center of the element, in order to achieve the desired origin position.

It looks like the value of transform-origin is similar to that of background-position. To make it easier to remember, you can compare keywords with percentage values:

Top = top center = center top = 50% 0

Right = right center = center right = 100% or (100%)

Bottom = bottom center = center bottom = 50% 100%

Left = left center = center left = 0 or (0.50%)

Center = center center = 50% or (50%)

Top left = left top = 0 0

Right top = top right = 100%

Bottom right = right bottom = 100%

Bottom left = left bottom = 0.100%

In order to make everyone understand at a glance, the following screenshot takes the rotation rotate () in transform as an example, and the effect is different when transform-origin values are different:

The value of transform-origin is center (or center center or 50 or 50):

The value of transform-origin is top (or top center or center top or 50%):

The transform-origin value is right (or right center or center right or 100% or 100% 50%):

The value of transform-origin is bottom (or bottom center or center bottom or 50%):

The value of transform-origin is left (or left center or center left or 0 or 0.50%):

The value of transform-origin is top left (or left top or 0):

The value of transform-origin is right top (or top right or 100%):

The value of transform-origin is bottom right (or right bottom or 100%):

The value of transform-origin is left bottom (or bottom left or 0.100%):

Example: swinging ball (pendulum effect)

As can be seen from the picture above, the ball swing effect uses the principle of animation, as well as the principle of transform-origin (very important). First, determine the deformation center of the strike, and then add the animation effect.

Schematic:

.sphere {

Width: 60px

Height: 60px

Background: # 9485FD

Border-radius: 100%

Margin: 280px auto

Background: radial-gradient (circle at top center, # c6bff6, # 6959d8, # 372a91)

Transform-origin: center-200px

Animation: clock 4s infinite linear

Position: relative

}

.sphere:: before {

Content: ""

Position: absolute

Bottom: 100%

Left: 50%

Width: 1px

Height: 200px

Border-left: 1px # 9485FD dashed

}

@ keyframes clock {

0% {

Transform: rotate (0deg)

}

25% {

Transform: rotate (30deg)

}

50% {

Transform: rotate (0deg)

}

75% {

Transform: rotate (- 30deg)

}

100% {

Transform: rotate (0deg)

}

}

The above is all the content of the article "how to use css3 attribute transform-origin". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.