| Article Introduction: in this article, the basic knowledge of CSS3 's transform is reviewed, and then the relevant knowledge of Transform-origin is introduced in depth. |
In CSS2.1, our pages are static, and web designers are accustomed to designing them as a design tool for page effects. But often some page effects are not just static, for example, how to actually move some elements? How do I change the appearance of an element--rotate or zoom?
For years, web designers have relied on pictures, flash, or JavaScript to make changes to the page's appearance. However, CSS3 will change the thinking of designers, into the CSS3 era, with the help of CSS3 can easily tilt, zoom, move and flip elements.
In May 2011 at the station published the first on the CSS3 transform tutorial, now after nearly two years, there are many things have changed, and understanding is slightly different, next will be a few tutorials, to introduce CSS3 transform related knowledge.
Introduction of CSS3 deformation
In September 2012, the consortium published a draft of the CSS3 deformation work. The CSS3 variant allows 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 translation, rotation, scaling, and tilt effects, each of which is called a transformation function (Transform functions) that can manipulate changes such as rotation, scaling, and peaceful movement of elements. These effects need to rely on pictures, flash, or JavaScript before they can be completed. Using pure CSS To complete these variants eliminates the need to load these extra files, once again boosting your development efficiency and improving the efficiency of your page's execution.
CSS transformations allow you to dynamically control elements. You can move them around the screen, shrink or enlarge, rotate, or combine all of these to produce complex animation effects. Through the CSS transformation, can let the element produce the static visual effect, but can also easily combine the CSS3 transition and the animation keyframe to produce some animation effect. In this chapter, you first introduce a simple 2D variant, and then show you how to extend the transformation to a variant of the diagram.
transform property refers to a set of conversion functions.transform include translate() , scale() ,, rotate() and skew() .translate()A function accepts a standard unit of measure for a CSS; a scale() 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 the parameters of the x and Y axes.X /Y translateX() translateY() scaleX() scaleY() skewX() and skewY() .matrix() , which includes six parameters.rotateX() rotateY() rotate3d() translateZ() translate3d() scaleZ() and scale3d() .matrix3d() function, which includes 16 parameters.transform-originproperty to specify where the center point of the element is. A third number transform-origin-z is added to control the center point of the element's three-dimensional space.perspectiveProperty relative to the audience to produce a 3D scene, you look at the 3D object, the distance from the eye to the canvas. The correct usage is that he needs to apply it to the ancestral elements of the deformed element.perspective-originIs the position of the viewpoint.backface-visibiltyproperty to set the visibility of the back.transform-style preserve-3d create a 3D rendering environment.Transform Property
The CSS3 (transform) attribute lets the element deform in a coordinate system. This property contains a series of transform functions that can move, rotate, and scale elements. The basic syntax for the Transform property is as follows:
transform：none transformProperty can be used for inline elements and block elements. The default value is none , which means that no elements are not deformed. transformAnother property value is a series of . represents one or more transformation functions, separated by spaces; in other words, we manipulate a variety of attributes, such as,, and so on, that deform an element at the same time rotate scale translate . But here we need to remind you that we used to have the superposition effect separated by commas (","), but we transform transform-function need to have spaces separated when we use multiple.
The Transform property is part of the 3D transform (3D transform) module, which means that all 2D deformation functions are also included in the 3D deformation specification. In this way, the functions of CSS3 deformation are slightly different according to different specifications, the following are listed in the deformation of the 2D and 3D commonly used transformation functions, simple description is as follows:
2d transform commonly used transform-function features:
translate(): Used to move elements, you can reposition element positions based on the x and y axes coordinates. On this basis there are two extension functions: translateX() and translateY() .scale(): Used to reduce or enlarge elements, you can use element size changes. On this basis there are two extension functions: scaleX() and scaleY() .rotate(): Used to rotate elements.skew(): Used to tilt the element. On this basis there are two extension functions: skewX() and skewY() .matrix(): Defines matrix deformations, repositioning element positions based on the x and y axes coordinates.3D transform commonly used transform-function features:
translate3d(): Moves the element element to specify a 3D deformation displacementtranslate(): Specifies the displacement of the 3D offset on the z axis.scale3d(): Used to scale an element.scaleZ(): Specifies the zoom 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 matrix variants.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 following illustration:
We have not used to transform-origin change the origin of the elements of the situation, the CSS deformation of the rotation, displacement, scaling and other operations are the elements of their own center (deformation origin) of the location of the deformation. However, many times it is necessary to transform the elements in different positions, we can use transform-origin to change the origin of the elements, so that the original point of the element is not in the center of the element to achieve the desired origin location.
If we set the element transformation 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 the following illustration:
As shown in the figure above, changing the transform-origin values of the x and y axes of an attribute can reset the origin of the element's warp point, and its basic syntax is as follows:
transform-origin：[ left center right top bottom] [ left center right] [[ left center right] && [ top centerThe syntax above is so giddy that you can actually split the syntax into:
/*只设置一个值的语法*/ transform-origin: x-offset transform-origin:offset-keyword /*设置两个值的语法*/ transform-origin：x-offset y-offset transform-origin：y-offset x-offset-keyword transform-origin：x-offset-keyword y-offset transform-origin：x-offset-keyword y-offset-keyword transform-origin：y-offset-keyword x-offset-keyword /*设置三个值的语法*/ transform-origin：x-offset y-offset z-offset transform-origin：y-offset x-offset-keyword z-offset transform-origin：x-offset-keyword y-offset z-offset transform-origin：x-offset-keyword y-offset-keyword z-offset transform-origin：y-offset-keyword x-offset-keyword
transform-originProperty values can be specific values such as percentages, EM, px, or keywords such as top, right, bottom, left, and center.An attribute in a 2d
transform-origincan be either a parameter value or a two parameter value. In the case of two parameter values, the first value sets the position of the horizontal x-axis, and the second value is used to set the position of the Y axis in the vertical direction.The properties in the 3D transformation
transform-originalso include the third value of the z-axis. The value of each value is simply described as follows:
transform-origin horizontal x axis, you can use and < Percentage> value, which can also be positive (offset from the center point along the horizontal X axis to the right), or negative (from the center point to the horizontal X axis to the left). top , right , bottom , left , or A keyword in center that you can use to set the offset of the transform-origin . Transform-origin property in the vertical y-axis, you can use and < The Percentage> value, which can be either positive (the offset from the center point along the vertical y-axis) or negative (the offset from the center point to the y-axis along the vertical direction). left , right , or center that you can use to set the Transform-origin the offset of the property value at the horizontal x axis. top , bottom , or center that you can use to set the Transform-origin the offset of the property value in the vertical y-axis. Transform-origin in the 3D transform, the default value is z=0 , and its value can be , but will not work here.
It appears that transform-origin the value is similar to the background-position value. In order to facilitate memory, you can compare the keyword and the percentage of the value 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 screenshot below takes the rotation rotate () in transform as an example and transform-origin the effect when the value is different:
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):
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%):
Transform-origin value is left (or left center or center left or 0 or 0 50%):
Transform-origin value is top left (or left top or 0 0):
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 skewing in CSS3 transformations can be reset by transform-origin attributes to the origin of the element, but the displacements are translate() always shifted at the center point of the element. For example, the following two-paragraph 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 by transform-origin setting the deformation 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 the element transform-origin is changed from 50% 50% to 100% 100%, the element displacement translate() is always shifted according to the center point of the element, as shown in the following illustration:
So far, transform-origin attributes are well supported in modern mainstream browsers, but the private properties of browsers still need to be added under some browsers, as shown in the details below:
- 2d transform-origin need to add browser private property versions: Ie9+, firefox3.5+, chrome4+, safari3.1+, Opera10.5+;ios safari3.2+, Android browser2.1+, Blackberry browser7.0+, Chrome for android25.0+.
- 2d Transform-origin browsers that support the standard standards of the consortium: ie10+, firefox16+, Opera12.1+;opera mobile11.0+, Firefox for Android19.0.
- Transform-origin in 3D transformation you need to add browser private property versions: Ie10+, firefox10+, chrome12+, safari4+, opera15+, IOS safari3.2+, Android browser3.0+, Blackberry browser7.0+, Opera mobile14.0+, Chrome for android25.0+.
- 3D Transform-origin browsers that support the standard standards for the Web: firefox16+, Firefox for android19+
By transform-origin changing the origin of the element, we can realize different deformation effects, in the following example we demonstrate the operation of CSS3 deformation function to the image before and after changing the origin of the element.
To be more comparative, the following example has two div , each div has 5 img , and the first div means Transform-origin is the effect when the default value, the second div means transform-origin modified in different transform The effect in the function.
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, the browser prefix is omitted from the code.
First look at the Transform-origin property to change the original point before and after the rotate () function on the image rotation effect:
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 effect of rotation rotate() functions around different origin in the transformation, the process of div rotating the picture in the first container around the default origin (center) of the picture, and div the picture in the second container passes the transform-origin picture origin from the center point ( center Modify to the bottom center point ( bottom ) rotation process:
Next, we look at transform-origin modifying the original point before and after, CSS3 deformation in the skew function of the skew() image deformation process:
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 looks like this:
The above two examples simply demonstrate that the and functions in the transform rotate() skew() can change the origin of the transform-origin object by attributes, allowing the object to deform according to different origin points. And I'm going to continue to show you. The scaling scale() function in deformation produces deformation effects at different origin:
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 looks like this:
The above three simple examples once again verify that the rotation rotate() , scaling, and skew functions in the CSS3 transform scale() skew() can transform-origin change the origin position of the element object through properties. However transform-origin , the attribute changes the position of the element to the origin, and the displacement translate() function always shifts from the element to the center point of the image.
The previous demo is just a 2D variant used to modify the origin of the transform-origin element object and the different effects on the various transformation functions. Next, let's look at a simple example that illustrates the transform-origin 3D rotation effect of modifying element origin in 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:
Next article
In this article, the basic knowledge of CSS3 's transform is reviewed, and then the relevant knowledge of Transform-origin is introduced in depth. In the following article, we will explore the application of the Transform-style and perspective attributes together. Let's all look forward to it with me.
If you want to reprint, please indicate the source: http://www.w3cplus.com/css3/transform-origin.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
