July 23 = 261-265

12.1 css3 provides deformation support

CSS 3 supports common geometric transformations for HTML components, including rotation, scaling, skew, and displacement.

4. You can also use the transformation matrix for deformation.

Css3 provides the following two attribute values for deformation support.

Transform: This attribute is used to set deformation. This attribute supports one or more deformation functions. Css3 provides the following deformation functions.

Translate (TX [, Ty]): This function sets the Tx distance for HTML components to move horizontally, and the Ty distance to move vertically. Ty Parameter

It can be omitted. If the Ty parameter is omitted, the default value of Ty is 0, indicating that there is no vertical displacement.

Translatex (TX): This function sets the horizontal movement of the Tx distance from the HTML component.

Translatey (TY): This function sets the vertical distance between HTML components and moving ty.

Scale (sx, XY): This function sets the horizontal scaling ratio of HTML components to Sx, and the vertical scaling ratio to Sy. The Sy parameter can be omitted. If

If this parameter is omitted, Sy is equal to SX by default, that is, maintaining the aspect ratio scaling.

Scalex (SX): this function is equivalent to executing Scale (sx, 1 ).

Scalex (SY): this function is equivalent to executing Scale (1, Sy ).

Rotate (angle): This function sets the angle clockwise for the HTML component.

Skew (SX [, sy]): This function sets the HTML component to tilt the SX angle along the X axis and the SY Angle Along the Y axis. The Sy parameter is optional.

If the SY parameter is omitted, Sy defaults to 0.

Skewx (SX): This function sets the HTML component to tilt the SX angle along the X axis.

Skewx (SY): This function sets the HTML component to tilt the SY Angle Along the Y axis.

Matrix (M11, M12, m21, m22, dx, Dy): This is a matrix transformation-based function. The first four parameters are distorted.

Matrix; Dx and Dy translate the coordinate system.

Transform-origin: This attribute is used to set the deformed Central Store. This attribute value should be set to xcenter ycenter,

Xcenter and ycenter support the following attributes.

Left: specifies that the center of rotation is at the left border of the HTML component. This attribute value can only be specified to xcenter.

Top: specifies that the rotation center is located at the upper border of the HTML component. This attribute value can only be specified to ycenter.

Right: specifies that the center of rotation is located at the right border of the HTML component. This attribute value can only be specified to xcenter.

Bottom: specifies that the rotation center is located at the bottom border of the HTML component. This attribute value can only be specified to ycenter.

 

Code example:

// Set 30 degrees of rotation for this element

Div {

Width: 100px;

Height: 100px;

Border: 1px solid;

Transform: Rotate (30deg );

}