Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve 2D deformation in css3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

In css3, animation is added, which makes the web page more dazzling and simple. We can use css3's 2d deformation attribute transform to make a variety of 2d animations, such as image rotation, tilt, scaling, moving, and so on.

First, take a look at the css3 transform attribute. The initial value of the transform attribute is none, which applies to block elements and inline elements.

The values of transform are as follows:

Translate ([,]):

Move the element object and reposition the element based on X and Y coordinates. The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0

TranslateX (): specifies the translation of the object's X axis (horizontal)

TranslateY (): specifies the translation of the object's Y axis (vertical)

Rotate ()

The rotation element object, which specifies the 2D rotation of the object, is the base point as defined by the ransform-origin attribute and defaults to center,center.

It is allowed to pass a degree value for the rotation of the element; this degree value can be positive or negative, where a positive value represents a clockwise rotation and a negative value represents a counterclockwise rotation. Here, a 2Droation (2D rotation) is specified for the element through the specified angle parameter, but the definition of the trans-origin attribute is required. Trans-origin defines the base point of rotation, which is commonly written as: transform:rotate (30deg); it means to rotate 30 degrees clockwise.

Scale ([,])

Scale the element object, which specifies the 2D scale of the object.

The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value of the first parameter is taken by default.

It uses one or two positive and negative numbers and decimals as parameters; the meaning of the two parameters: X-axis scaling and y-axis scaling, positive numbers represent magnification, negative numbers represent reduction, when using decimals, greater than 1 means magnification, less than 1 indicates reduction, when a parameter is used, the x-axis and y-axis scaling are the same.

The scale () method has three situations:

Scale makes elements scale horizontally and vertically (that is, the x and y axes are scaled at the same time).

The scaleX (x) element is scaled horizontally only (x-axis scaling)

ScaleY (y) element only vertical scaling (y axis scaling), it should be noted here: these three methods have the same zoom center point and cardinality, the center point is the central position of the element, the zoom cardinality is 1, the value is greater than 1, the value is less than 1, the element shrinks.

ScaleX (): specifies the (horizontal) scaling of the object's X axis

ScaleY (): specifies the (vertical) scaling of the object's Y axis

Skew ([,])

Tilt the element object, which specifies that the object is skewed and twisted. The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0

SkewX (): specifies the (horizontal) twist of the object's X axis

SkewY (): specifies the (vertical) twist of the object's Y axis

Matrix (,):

To define a matrix transformation, that is, to specify a 2D transformation in the form of a six-valued transformation matrix, which is equivalent to the direct application of a [a ~ b ~] transformation matrix.

Here is a simple example to give you a better understanding of the css3 2D transform properties.

In this example, the div element zooms in and rotates as the mouse passes over the image, and the original effect is restored when the mouse is removed.

The css style code is as follows:

Div {

Margin:100px 0

Width: 400px

Height: 100px

Background:url (images/bg1.jpg) center

}

Div:hover {

/ * define the state of the animation * /

-webkit-transform: rotate (- 90deg)

-moz-transform: rotate (- 90deg)

-o-transform: rotate (- 90deg)

-transform: rotate (- 90deg)

Filter: progid:DXImageTransform.Microsoft.BasicImage (rotation=3)

}

These are all the contents of the article "how to achieve 2D deformation in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.