12.CSS3 Transform details

==transform== In CSS3, transform mainly includes rotate, skew, scale, translate and matrix transformation.

A grammar.

The transform: none | [] * is: transform: rotate | scale | skew | translate | matrix;

None: indicates no transformation. Represents one or more transformation functions, separated by Spaces; In other words, we operate multiple transform properties on the same element at the same time, such as rotate, scale, and translate. It is important to note that in the past, the superposition effect was separated by commas (“, “), but multiple transform properties are separated by Spaces. Remember, it’s separated by Spaces.

2. 2 d transformation

2.1 Translate

1.1 Translate (x,y): Units can be px

1.2 Units can also be percentages. The reference is the element itself

1.3 Parameters can be (x,y),x,y axis displacement

1.4 Parameter (x) : Set the displacement on X-axis

2.1.1 Translate (x,y) moves horizontally and vertically at the same time (i.e., x and Y move at the same time);

Translate ([x,y]) : Specify a 2D translation using the vector [tx, ty], where tx is the first transition parameter and TY is the second transition parameter option. If not provided, ty takes 0 as its value. Namely translate (x, y), which represents the object of translation, according to the set of x, y parameter values, the duty is negative, the direction of a moving object, the center of basis points for the element by default, also can change according to the transform – origin basis points. As the transform: translate (100 px, 20 px) :

2.2.2 TranslateX (x) moves only in the horizontal direction (X-axis move);

TranslateX () : specifies a translate with a given number in the X direction. The element is moved only towards the X-axis, and its base point is also the element center point, which can also be changed according to transform-origin. Such as: the transform: translateX (100 px) :

2.2.3 TranslateY (Y) moves only vertically (Y axis moves)

TranslateY () : specifies a translate with a given number of Y directions. The base point is at the center point of the element, and the position of the base point can be changed by transform-origin. Such as: the transform: translateY (20 px) :

The < style > / * a. Displacement: Box1 {width: x,y */. Box1 {width: x,y */. Box1 {width: x,y */. 100px; height: 100px; background-color: pink; transition: all 1s; } .box2 { width: 100px; height: 100px; background-color: red; transition: all 1s; } .box1:hover { transform: translate(100px, 0) } .box2:hover { transform: translate(100%, 0) } </style> <body> <div class="box1">div1</div> <div class="box2">div2</div> </body>Copy the code

2.2 rotate rotating

Rotate () : A 2D rotation is applied to the original element using the specified Angle. The transform-origin property is defined first. Transform-origin defines the base point of rotation, where Angle refers to the rotation Angle. If the value is set to positive, it indicates clockwise rotation; if the value is set to negative, it indicates counterclockwise rotation. Such as: the transform: the rotate (30 deg) :

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { width: 800px; height: 400px; border: 1px solid pink; } #box { margin: 100px auto; width: 200px; height: 200px; background: pink; transition: all 3s; } body:hover #box { transform: rotate(360deg); } </style> </head> <body> <div id="box"> nmx </div> </body> </html>Copy the code

2.3 SkeW

2.3.1 Skew (x, Y) distorts elements in both horizontal and vertical directions (X-axis and Y-axis are distorted at a certain Angle at the same time)

Skew ([,]) : Skew transformation on the X-axis and Y-axis. The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second argument is not provided, the value is 0, i.e., there is no tangent in the y-direction. Skew is used for row skew. The first parameter is the horizontal skew Angle and the second parameter is the vertical skew Angle. The second argument is optional. If the second argument is not set, the Y-axis is 0deg. Also based on the center of the element, we can also change the base position of the element through transform-origin. Such as: the transform: skew (30 deg, 10 deg) :

2.3.2 skewX(x) only distorts elements in the horizontal direction (X-axis distortion)

SkewX () : Specifies a skew transformation along the X-axis at a given Angle. SkewX is an element that is based on its center and twisted horizontally (the X-axis). The transform-origin can also be used to change the base point of an element. Such as: the transform: skewX (30 deg)

2.3.3 skewY(y) only distorts elements in the vertical direction (Y-axis distortion)

SkewY () : Specifies a skew transformation along the Y-axis at a given Angle. SkewY is used to set an element at its center and distort it in the vertical direction (Y-axis) at a given Angle. We can also use transform-origin to change the base point of an element. Example: Transform :skewY (10deg)

2.4 Scale

They have the same zoom center and cardinality, whose center is the central position of the element
If the base is 1, the element is enlarged if its value is greater than 1, and shrunk if its value is less than 1.

2.4.1 Scale (x,y) scales the element horizontally and vertically (i.e., x and Y scales simultaneously)

Scale ([x, y]) : Specifies a 2D scale(2D scale) by providing two parameters to perform the [sx, SY] scale vector. If the second argument is not provided, the same value as the first argument is taken. Scale (X,Y) is used to scale the element. The transform-origin base point of the element can be set. The base point is also located in the center of the element. In the base, X represents the horizontal scaling factor, Y represents the vertical scaling factor, and Y is an optional parameter. If Y is not set, the scaling factor in the X and Y directions is the same. And let X prevail. = = * * such as: the transform: scale,1.5 (2) :

2.4.2 scaleX(X) Elements are scaled horizontally only (X-axis scaling)

ScaleX () : Scaling operations are performed using the [sx,1] scaling vector, sx being the required parameter. ScaleX means that the element is only scaled in the X-axis (horizontal direction). Its default value is (1,1), and its base point is also in the center of the element. We also change the base point of the element by transform-origin. Such as: the transform: scaleX (2) :

2.4.3 scaleY(y) Elements are only scaled vertically (Y-axis scaled)

ScaleY () : Performs scaling operations using the [1,sy] scaling vector, with sy as the required parameter. ScaleY means that the element is only scaled in the Y-axis (vertical direction), and its base point is also in the center of the element. The base point of the element can be changed by transform-origin. As the transform: scaleY (2) :

<style> /* Scale 1.1 - They have the same scale center and base, the center is the element's center position 1.2 - scale base is 1, the element is enlarged if the value is greater than 1, the element is shrunk if the value is less than 1. 1.3 ** If Y is not set, the scaling in X and Y directions is the same. And let X prevail. */ .div1 { width: 100px; height: 100px; background-color: pink; margin: 100px auto; transition: transform 2s; /* transform-orgin:center center */ transform-origin: left top; } .div1:hover { transform: scale(2); } </style>Copy the code

2.5 Matrix Matrix deformation

Matrix (,,,,,) : Specify a 2D transformation in the form of a six-valued (A,b, C, D,e,f) transformation matrix, equivalent to directly applying a [A, B, C,d,e, F] transformation matrix. Is based on the horizontal direction (X) and vertical (Y) to reposition elements, use the attribute value involved in mathematics matrix, I said here is simply the range of the transform in such an attribute value, if an interested friends can be used to understand deeper martix method, there is not much.

2.6 Transform-orgin changes elemental base points

Transfrom-origin Indicates the conversion origin

1. One value: Set the X-axis origin

2. Two values: Set the origin of the x and y axes

3. The default origin is center: Center,center

4. Attribute values can be percentages

5. The value can also be left,center,right on the X-axis and top,center,bottom on the Y-axis

Transform-origin (X,Y): The reference point used to set the element’s motion. The default point is the center point of the element. Where X and Y can be 100 values,em,px, where X can also be character values left,center,right; Y is the same as X and we can also set top,center,bottom, which looks a little bit like our background-position; Here’s how to write them:

1, top left | left top equivalent to | 0 0 0% 0%

2, top | top center | center top equivalent to 0 50%

3, right, top | top right is equivalent to 100% of 0

4, left | left center | center left equivalent to | 0 50% 0% 50%

5, center | center center is equivalent to 50% 50% (default)

6, right | right center | center right is equivalent to 100% 50%

7, bottom left | left bottom is equivalent to | 0 100% 0% 100%

8, bottom | bottom center | center bottom is equivalent to 50% 100%

9, bottom right | right bottom is equivalent to 100% 100%

Where left and center right are values in the horizontal direction, and the corresponding hundred score is left=0%. center=50%; Right =100% and top center bottom is the vertical direction, where top=0%; center=50%; bottom=100%; If you take only one value, it means that the vertical value does not change. Let’s look at the following examples separately

(1)transform-origin:(left,top):

(2)transform-origin:right

(3)transform-origin(25%,75%)

2.7Transform writing rules in different browser kernels

Listed above are the writing rules of different browse kernel transform. If you want to be compatible with different browsers, all of the above writing rules need to be called.

Transform browser support

The same transform is not compatible with the IE9 version, so many friends say, IE does not work, why do I use this? Personally, CSS3 launched, he is a relatively cutting-edge technology, as Web front-end developers or enthusiasts are necessary to understand and master a new technology, if you want to wait until all browsers compatible, that we can only say NO to CSS3, I don’t use you. Because IE boss is unable to keep up with ，，，， purely personal views, does not represent any. Same words, interested friends like me, ignore IE, we continue to watch.

2. 3 d transformation

No added