"CSS3 Transform Properties and Transition Properties"

Css3transform PropertiesTransformIt is literally deformation, the meaning of change. In the CSS3TransformThese include the following: rotating rotate, twisting skew, scaling scale and moving translate, and matrix morphing matrices. 2D Transform Method

1. Translate () moves from the current element position according to the parameters given at the left (x-axis) and top (Y-axis) positions.
2. Rotate () an element that rotates clockwise in a given degree. Negative values are allowed so that the elements are rotated counterclockwise.
3. Scale () Increases or decreases the size of the element, depending on the width (x axis) and the height (Y axis) of the parameter.

4. The matrix () and 2D transform methods are combined into one.
   The matrix method has six parameters, including rotation, zoom, move (pan), and tilt.

5. Skew () contains two parameter values that represent the angle of the x-axis and y-axis skew, and if the second parameter is empty, the default is 0, and the parameter is negative to skew in the opposite direction.
   Skewx (<angle>); indicates that only the x-axis (horizontal direction) is tilted.
   Skewy (<angle>); indicates that only the y-axis (vertical direction) is tilted.

Let's introduce them to each of the following:

first, mobile translate

1, translate (x,y) define 2D transformations, moving elements along the x and Y axes.

such as: Translate:translate (100px,20px);

2, TranslateX (n) defines the 2D transform, moving the element along the X-axis.

such as: Transform:translatex (100px);

3, Translatey (n) defines the 2D transform, moving the element along the Y axis.

such as: Transform:translatey (20px);

second, rotating rotate

Rotate (angle) defines the 2D rotation, which specifies the angle in the parameter.

such as: Transform:rotate (30DEG);

Third, scaling scale

Note: The default value is 1, and its value is larger than 1 and smaller than 1.

1. Scale (x,y) defines the 2D scaling transformation, changing the width and height of the element.

such as: Transform:scale (2,1.5);

2, ScaleX (n) defines the 2D scaling transformation, changing the width of the element.

Example: Transform:scalex (2):

3, ScaleY (n) defines the 2D scaling transformation, changing the height of the element.

Example: Transform:scaley (2):

Four, twist skew

1, skew (x-angle,y-angle) defines 2D tilt transitions along the x and Y axes.

such as: Transform:skew (30DEG,10DEG);

2, skewx (angle) defines 2D tilt conversion along the X axis.

such as: Transform:skewx (30DEG);

3, Skewy (angle) defines the 2D tilt conversion, along the Y axis.

such as: Transform:skewy (10DEG);

Change Elemental Base Point Transform-origin

The element x and y axes can be changed by the convert element.

Value	Describe
X-axis	Defines where the view is placed on the X-axis. Possible values: Left Center Right Length %
Y-axis	Defines where the view is placed on the Y axis. Possible values: Top Center Bottom Length %

3D Conversion Properties

Property	Describe
Transform	Applies a 2D or 3D conversion to an element.
Transform-origin	Allows you to change the position of the element being converted.
Transform-style	Specifies how nested elements are displayed in 3D space.
Perspective	Specifies the perspective effect of the 3D element.
Perspective-origin	Specifies the bottom position of the 3D element.
Backface-visibility	Defines whether the element is visible when it is not facing the screen.

transform-style:flat|preserve-3d; Indicates that all child elements are rendered in 3D space.

Such as:

perspective: number |none; Set the angle from where to view an element

such as: perspective:500;

3D Transform Method

The axis of the warp is planar, with only the x-axis and y-axis, and the 3D-deformed axis is a three-dimensional space consisting of x, Y, z three axes, the x-axis forward, the y-axis forward, and the z-axis heading right, down, and off-screen respectively.

(Here's a good example of what I've seen before, and I borrowed it to share it.) ）

For example, the following is a transform effect (GIF) that contains two transform functions:

If you swap the order of these two transform functions, this is the effect:

As you can see, because the coordinate system changes with each transformation, the final position of the element is different in the case of a different order.

CSS3 transition

Property	Describe
Transition	Shorthand property, which is used to set four transition properties in one property.
Transition-property	Specifies the name of the CSS property that the transition is applied to.
Transition-duration	Defines the time that the transition effect takes. The default is 0.
Transition-timing-function	A time curve that specifies the transition effect. The default is "ease".
Transition-delay	Specifies when the transition effect begins. The default is 0.

The Transition property is a shorthand property for setting four transition properties:

• Transition-property
• Transition-duration
• Transition-timing-function
• Transition-delay

Such as:

<! DOCTYPE html>{width:100px;Height:100px;background:Red;transition:width 2s;-moz-transition:width 2s;/*Firefox 4*/-webkit-transition:width 2s;/*Safari and Chrome*/-o-transition:width 2s;/*Opera*/}. Box:hover{width:300px;}</style>

The effect is this, it will have a process when the width becomes 300px, is the transition.

Today's content is these ~ ~ ~

"CSS3 Transform Properties and Transition Properties"