CSS3 Transform--transform-origin

In CSS2.1, our pages are static, and web designers are accustomed to use it as a design tool for page effects. But often some page effect is not only static, for example, how to actually move some elements? How do I change the appearance of an element--rotate or scale?

Over the years, web designers have relied on images, flash, or JavaScript to make changes to the look of the page. However, CSS3 will change the way designers think, into the CSS3 era, with the help of CSS3 can easily tilt, zoom, move and flip elements.

Introduction of CSS3 deformation

In September 2012, the group published a draft CSS3 deformation work. The CSS3 variant allows the CSS to convert elements into 2D or 3D space, which includes CSS3 2D variants and CSS3 3D variants.

CSS3 deformation is a collection of effects, such as panning, rotating, zooming, and skewing, each of which is called a morph function (Transform functions) that controls the rotation, scaling, and panning of elements. These effects need to depend on images, Flash, or JavaScript before they can be completed. The use of pure CSS to complete these transformations does not require the loading of these additional files, which once again improves your development efficiency and improves the efficiency of the page execution.

CSS morphing allows you to control elements dynamically. You can move them around the screen, zoom in or out, rotate, or combine all of these to produce complex animation effects. CSS morphing allows elements to generate static visuals, but can also easily combine CSS3 's transition and animated keyframe to produce some animated effects. In this chapter, you'll start with a simple 2D transformation, and then show you how to scale into a warp.

• The CSS3 transform property refers to a set of conversion functions.
• The 2D functions of the CSS3 transform include translate() , scale() ,, rotate() and skew() .
• translate()The function accepts a standard unit of measure for the CSS, scale() the function accepts a decimal value between 0 and 1, rotate() and skew() two functions accept a radial unit of measure value deg . In addition rotate() to functions, each function accepts parameters for the X-and Y-axes.
• There are functions available in CSS3 variants X /Y : translateX() ,,, translateY() scaleX() scaleY() ,, skewX() and skewY() .
• There is also a matrix function in the three-in-one deformation matrix() , which includes six parameters.
• CSS3 3D variants include functions such as:,,,, rotateX() rotateY() rotate3d() translateZ() translate3d() , scaleZ() and scale3d() .
• The CSS3 3D transformation also includes a matrix matrix3d() function, which includes 16 parameters.
• transform-originproperty specifies where the center point of the element is. The third number transform-origin-z is added, and the control element is a three-dimensional center point.
• perspectiveThe properties are created in a 3D scene for the audience, and you look at the 3D object, the distance from the eye to the canvas. The correct usage is that he needs to be applied to the ancestor elements of the deformed element.
• perspective-originAs the position of the viewpoint.
• backface-visibiltyproperty is used to set the visibility of the back.
• Set transform-style the value to preserve-3d a value that establishes a 3D rendering environment.

Transform Property

The CSS3 deformation (transform) property allows the element to deform in a coordinate system. This property contains a series of morph functions that you can move, rotate, and scale elements. The basic syntax for the Transform property is as follows:

<transform-function> [<transform-function>]*

transformProperties can be used for inline elements and block elements. Its default value is to none indicate that no element is deformed. transformAnother property value is a series <transform-function> . <transform-function>represents one or more transform functions, separated by spaces; in other words, we manipulate a number of properties that deform an element at the same time, such as, rotate scale ,, and translate so on. But here we need to remind you that in the past, our overlay effects are separated by commas (","), but transform spaces are required when using multiple in transform-function .

The transform attribute is part of the 3D morph (3D transform) module, which means that all 2D morph functions are also included in the 3D deformation specification. As a result, the functions in the CSS3 deformation are slightly different according to different specifications, and the following are the functions of the 2D and 3D deformation functions in the deformation, which are described briefly as follows:

The functions of transform-function commonly used in transform:

• translate(): Used to move elements, reposition element positions based on x-axis and y-coordinate. On this basis there are two extension functions: translateX() and translateY() .
• scale(): Used to reduce or enlarge elements, you can use the element size to change. On this basis there are two extension functions: scaleX() and scaleY() .
• rotate(): Used to rotate an element.
• skew(): Used to tilt the element. On this basis there are two extension functions: skewX() and skewY() .
• matrix(): Defines the matrix deformation, repositioning the element position based on the x-axis and y-axis coordinates.

3D transform commonly used transform-function features:

• translate3d(): Moves the element element to specify a 3D deformation move displacement amount
• translate(): Specifies the amount of displacement in the z-axis of the 3D displacement.
• scale3d(): Used to scale an element.
• scaleZ(): Specifies the scale vector for the z-axis.
• rotate3d(): Specifies the angle at which the element has a three-dimensional rotation.
• rotateX(), rotateY() and rotateZ() : Let the element have a rotation angle.
• perspective(): Specifies a perspective projection matrix.
• matrix3d(): Defines the Matrix warp.

Transform-origin Property

By default, the origin of the transformation is at the center point of the element, or 50% of the element's X and y axes, as shown in:

The transform-origin rotation, shift, and scaling of CSS transformations are distorted by the location of the element's own center (the origin of the deformation), if we do not use the change element origin position. But most of the time we need to deform the elements in different locations, we can use them to change the origin of the elements, so that the transform-origin element origin is not in the center of the element to achieve the desired origin position.

If we set the element transform Origin ( transform-origin ) to 0 (x) 0 (y), this time the transformation origin of the element is converted to the left corner of the element, as shown in:

As shown, changing the transform-origin values of the x and Y axes of a property resets the element deform origin position, with the basic syntax as follows:

transform-origin:[<Percentage>|<length> | Left | Center | Right | Top | Bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length>?             

The syntax above makes a person faint, but it can be split into:

/* Only set a value for syntax */transform-origin:x-offsettransform-origin:offset-keyword/* set the syntax for two values */transform-origin:x-offset  y-offsettransform-origin:y-offset  X-offset-keywordtransform-origin:x-offset-keyword  Y-offsettransform-origin:x-offset-keyword  Y-offset-keywordtransform-origin:y-offset-keyword  x-offset-keyword/* set the syntax for three values */transform-origin:x-offset  y-offset  z-offsettransform-origin:y-offset  X-offset-keyword  Z-offsettransform-origin:x-offset-keyword  y-offset  Z-offsettransform-origin:x-offset-keyword  Y-offset-keyword  Z-offsettransform-origin:y-offset-keyword  X-offset-keyword  Z-offset

transform-originAttribute values can be specific values such as percentages, EM, px, and so on, and can be keywords like top, right, bottom, left, and center.

The attributes in a warp transform-origin can be either a parameter value or a two parameter value. If it is two parameter values, the first value sets the position of the horizontal x-axis, and the second value is the position used to set the vertical y-axis.

The attributes in the 3D transformation transform-origin also include the third value of the z-axis. The values of each value are simply described as follows:

• X-offset: Used to set the offset of the x axis of the transform-origin horizontal direction, you can use <length> and < Percentage> value, which can also be positive (offset from the center point to the right of the horizontal x-axis) or negative (offset from the center point to the left by the horizontal x-axis).
• Offset-keyword: Is top , right , bottom , left , or A keyword in the center that can be used to set the offset of transform-origin .
• Y-offset: Used to set the offset of the Transform-origin property in the vertical y-axis, you can use <length> and < The Percentage> value, which can be positive (offset from the vertical y-axis down the center point), or negative (offset from the center point vertically along the y-axis).
• X-offset-keyword: is a keyword in left , right , or center that you can use to set the Transform-origin the offset of the property value at the horizontal x-axis.
• Y-offset-keyword: is a keyword in top , bottom , or center that you can use to set the Transform-origin the offset of the property value in the vertical y-axis.
• Z-offset: Used to set the distance of Transform-origin away from the user's eye point in the 3D transformation, the default value z=0 , which can be <length , but <percentage> will not be valid here.

transform-originthe value looks similar to the value you are background-position taking. In order to facilitate memory, you can compare the keywords and percent values to remember:

• top = Top Center = center top = 50% 0
• right = right Center = center right = 100% or (100% 50%)
• bottom = Bottom Center = Center bottom = 50% 100%
• left = Left Center = center left = 0 or (0 50%)
• Center = Center Center = 50% or (50% 50%)
• Top left = left top = 0 0
• Right top = top right = 100% 0
• bottom right = right bottom = 100% 100%
• Bottom left = left bottom = 0 100%

To make it clear to everyone, the following is an example of the rotation rotate () in transform, and the effect when the value is different transform-origin:

Transform-origin value is center (or center center or 50% or 50% 50%):

Transform-origin value is top (or top center or center top or 50% 0):

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

Transform-origin value is bottom (or bottom center or center bottom or 50% 100%):

The Transform-origin value is left (or left center or center left or 0 or 0 50%):

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

The Transform-origin value is right top (or top right or 100% 0):

Transform-origin value is bottom right (or right bottom or 100% 100%):

Transform-origin value is left bottom (or bottom left or 0 100%):

Rotation, scaling, and skew in CSS3 transformations can reset the origin of the element through the transform-origin property, but the displacement is translate() always shifted at the center point of the element. For example, the following two-segment code demonstrates the process:

div {  -webkit-transform-origin:50% 50%;  -moz-transform-origin:50% 50%;  -o-transform-origin:50% 50%;  -ms-transform-origin:50% 50%;  transform-origin:50% 50%;  -webkit-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  -moz-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  -o-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  -ms-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  Transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);}

Next transform-origin , set the deform origin to 100% 100%:

div {  -webkit-transform-origin:100% 100%;  -moz-transform-origin:100% 100%;  -o-transform-origin:100% 100%;  -ms-transform-origin:100% 100%;  transform-origin:100% 100%;  -webkit-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  -moz-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  -o-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  -ms-transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);  Transform:translate (40px, 40px) translate ( -50px, 35px) Translatey (30px);}

Although the deformation origin of an element transform-origin is changed from 50% 50% to 100% 100%, the element displacement translate() is always shifted by the center point of the element, as shown in:

So far, transform-origin attributes have been well supported in modern mainstream browsers, but in some browsers it is still necessary to add individual browser private properties, as detailed below:

• Transform-origin need to add browser private property versions in the ie9+, firefox3.5+, chrome4+, safari3.1+, Opera10.5+;ios safari3.2+, Android browser2.1+, Blackberry browser7.0+, Chrome for android25.0+.
• Transform-origin supports the Web browser of the standard specification: ie10+, firefox16+, Opera12.1+;opera mobile11.0+, Firefox for Android19.0.
• 3D transform Transform-origin need to add browser private property version: Ie10+, firefox10+, chrome12+, safari4+, opera15+, IOS safari3.2+, Android browser3.0+, Blackberry browser7.0+, Opera mobile14.0+, Chrome for android25.0+.
• 3D variants in Transform-origin support for the standard specification of the browser: firefox16+, Firefox for android19+

transform-origindifferent deformation effects can be achieved by changing the origin of the element by the attribute, and the following example shows the deformation operation of the CSS3 deformation function on the image before and after changing the origin point of the element.

In order to be more contrasting, the following example has two div , each div has 5 img , and the first div means Transform-origin is the default effect, the second div means transform-origin modified in different transform The effect in the function.

<div>              </div><div>        </div>"

Default Style:

div {    width:500px;    height:300px;    margin:30px Auto;    position:relative;    Background:url (images/bg-grid.jpg) no-repeat Center Center;    background-size:100% 100%;} div img {    position:absolute;    top:50%;    left:50%;    Margin-left: -71px;    Margin-top: -100px; }

Note: in order to save space, each browser prefix is omitted from the code.

First of all, the Transform-origin property changes the image rotation effect of the rotate () function before and after the element origin.

Div Img:nth-child (1) {    opacity:. 5;    z-index:1;    Transform:rotate (10deg);} Div Img:nth-child (2) {    opacity:. 6;    Z-index:2;    Transform:rotate (25deg);} Div Img:nth-child (3) {    opacity:. 7;    Z-index:3;    Transform:rotate (35deg);} Div Img:nth-child (4) {    opacity:. 8;    Z-index:4;    Transform:rotate (45deg);} Div Img:nth-child (5) {    z-index:5;    Transform:rotate (60deg);} Div:nth-of-type (2) img {    transform-origin:bottom;}

The above example illustrates the rotate() effect that the rotation function rotates around different origin in the transformation, and the div picture in the first container rotates around the default origin (center) of the picture, while div the picture in the second container passes through the transform-origin property to the image origin from the center point ( center ) is modified to the bottom center point ( bottom ) rotation process:

Next, we look at the transform-origin process by which the tilt function in the CSS3 deformation is deformed before and after the origin is modified skew() :

Div Img:nth-child (1) {    opacity:. 5;    z-index:1;    Transform:skewx (10deg);} Div Img:nth-child (2) {    opacity:. 6;    Z-index:2;    Transform:skewx (15deg);} Div Img:nth-child (3) {    opacity:. 7;    Z-index:3;    Transform:skewx (20deg);} Div Img:nth-child (4) {    opacity:. 8;    Z-index:4;    Transform:skewx (25deg);} Div Img:nth-child (5) {    z-index:5;    Transform:skewx (30deg);} Div:nth-of-type (2) img {    transform-origin:bottom;}

The effect is as follows:

The above two examples simply demonstrate that the and functions in the transformation rotate() skew() can change the transform-origin object origin by attributes, allowing the object to deform according to different origin points. And then I'm going to show you how the scaling functions in the warp deform scale() at different origin points:

Div Img:nth-child (1) {    opacity:. 5;    z-index:1;    Transform:scale (1.2);} Div Img:nth-child (2) {    opacity:. 6;    Z-index:2;    Transform:scale (1.1);} Div Img:nth-child (3) {    opacity:. 7;    Z-index:3;    Transform:scale (. 9);} Div Img:nth-child (4) {    opacity:. 8;    Z-index:4;    Transform:scale (. 8);} Div Img:nth-child (5) {    z-index:5;    Transform:scale (. 6);} Div:nth-of-type (2) img {    transform-origin:right;}

The effect is as follows:

The above three simple instances verify again that the rotation rotate() , scaling, and skew functions in the CSS3 transformation scale() skew() can transform-origin change the origin position of the element object through attributes. But the transform-origin property changes the position of the element to the image origin, and the displacement translate() function always shifts the image center point based on the element.

The previous presentation is just a 2D transformation transform-origin used to modify the origin of the element object, as well as the different effects of various deformation functions. Next, take a look at a simple example and demonstrate transform-origin the 3D rotation effect of modifying the origin of the element in the 3D transformation.

div img {    position:absolute;    top:50%;    left:50%;    Margin-left: -71px;    Margin-top: -100px;     backface-visibility:visible;    Transform:perspective (500px);} Div Img:nth-child (1) {    opacity:. 5;    z-index:1;    Transform:rotate3d (1, 1, 1,10deg);} Div Img:nth-child (2) {    opacity:. 6;    Z-index:2;    Transform:rotate3d (1, 1, 1,25deg);} Div Img:nth-child (3) {    opacity:. 7;    Z-index:3;    Transform:rotate3d (1, 1, 1,35deg);} Div Img:nth-child (4) {    opacity:. 8;    Z-index:4;    Transform:rotate3d (1, 1, 1,45deg);} Div Img:nth-child (5) {    z-index:5;    Transform:rotate3d (1, 1, 1,60deg);} Div:nth-of-type (2) img {    transform-origin:left bottom-50px;}

The effect is as follows:

CSS3 Transform--transform-origin