The use of CSS3 Transformations (Transform) and transformation transitions

1, Transform function

Translatex (x): Moves the element horizontally, with a positive value moving to the right.

Translatey (y): Moves the element vertically, and the positive value moves downward.

Translate (x,y): Moves elements in both horizontal and vertical directions.

ScaleX (x): Scales the element horizontally (1.0 is the original size). Using a negative value flips the element around the y-axis, creating a right-to-left mirror image.

ScaleY (y): Scales the element vertically (1.0 is the original size). Using a negative value flips the element around the x-axis, creating a mirror from bottom to top.

Scale (X,y): scales elements in both horizontal and vertical directions.

Rotate (angle): Rotates clockwise around the center of the element. Rotate counterclockwise with a negative value.

Skewx (angle): tilt the element horizontally. The top and bottom edges are still horizontal and the left and right edges are tilted.

Skewy (angle): Tilt the element in the vertical direction. The left and right edges do not tilt, and the top and bottom edges tilt.

Skew (X-angle,y-angle): Tilt in both horizontal and vertical directions.

Matrix (N1,N2,N3,N4,N5,N6): Transform an element by multiplying it (all other transformations can be implemented using matrix multiplication).

2, transform

Transformations are a powerful tool that can move, scale, skew, and rotate elements, distorting its appearance. You can use the Transform property to implement the transform.

(The transformation does not affect other elements in the page, nor does it affect the layout.) For example, to enlarge an element by transformation, the element will simply overwrite the adjacent element.

Take the following picture as an example:

(1) Rotating elements and their contents

The following uses the rotate () function to rotate the element around its center point by 20 degrees.

<style>
. rotatedelement {
Transform:rotate (20DEG);
-ms-transform:rotate (20DEG);
-webkit-transform:rotate (20DEG);
}
</style>

(2) Continuous use of a variety of transformation effects

Let's first change the element to 1.2 times times, then move 30 pixels to the right, and then skew-15 degrees.

. rotatedelement {
Transform:scale (1.2) Translatex (30px) skew ( -15deg);
-ms-transform:scale (1.2) Translatex (30px) skew ( -15deg);
-webkit-transform:scale (1.2) Translatex (30px) skew ( -15deg);
}

(3) Modify the default reference point.
A general transformation is a reference point with the center point of an element. You can move this reference point by using the Transform-origin property before applying the transform.
Like what:
transform-origin:0% 0%; Indicates that the upper-left corner is a reference point
transform-origin:100% 0%; Represents the reference point in the upper right corner
transform-origin:50% 200%; Represents the reference point where the x-coordinate is the middle of the element's horizontal direction, and the y-coordinate is twice times the height of the element from the top edge.
The following allows the element to rotate 45 degrees around the upper-left corner of the element:

. rotatedelement {
transform-origin:0% 0%;
-ms-transform-origin:0% 0%;
-webkit-transform-origin:0% 0%;

Transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
-webkit-transform:rotate (45DEG);
}
(4) Remove all transformation effects
To remove all rollover effects, set the Transform property to None

. rotatedelement {
Transform:none;
-ms-transform:none;
-webkit-transform:none;
}

3,3d Transform
In addition to moving elements in two-dimensional space, CSS3 can also move, rotate, and bend elements in three-dimensional space with a 3D transform.
Concrete examples can be viewed here: http://css3.bradshawenterprises.com/transforms/#css3dtransforms

4, using Transformations to transition
Transformations and transitions are usually used in combination. For example, take an online album for example, when the mouse moves to the picture, the picture will rotate and enlarge. When the mouse leaves, the picture shrinks and returns to its original position. These transformations have a transition effect.

The code is as follows

<!doctype html>
<title>hangge.com</title>
<style>
. Gallery {
margin:0px 30px 0px 30px;
Background: #D8EEFE;
padding:10px;
}

. Gallery img{
margin:5px;
padding:5px;
width:75px;
Border:solid 1px black;
Background:white;
Transition:all 1s;
-webkit-transition:all 1s;
}

. Gallery Img:hover {
Transform:scale (2.2) rotate (10deg);
-ms-transform:scale (2.2) rotate (10deg);
-webkit-transform:scale (2.2) rotate (10deg);
}
</style>
<body style= "padding-top:100px" >
<div class= "Gallery" >




</div>
</body>