How to use the transform gradient property in CSS3

We know that the translate element is to let the element move from the current position, according to our given coordinates to the displacement, the following will give you a detailed interpretation of translate, and do a small case to help you understand, take a look.

Translate () moves from its current position, based on the given left (x-coordinate) and top (y-coordinate)

Translate (x, y) definition 2d convert XY to number x positive right negative to left Y positive for negative

Translate3d (x, y, z) defines 3D transformations

Scale () method, the dimension of the element increases or decreases, depending on the given width (X-axis) and height (Y-axis) parameters

Scale (x, y) defines 2D conversions X y as Multiples

Scale (2,4) converts the width to twice times the original size, converting the height to 4 times times the original height

The rotate () method rotates the given angle clockwise. Allow negative values, elements will rotate counterclockwise

Rotate (30deg) indicates rotation 30 degrees

Matrix () method

Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes.

Transition Transition Attribute Transition-property property specifies the name of the CSS property that applies the transition effect, such as: width

Transition-property:none|all|property;

The Transition-duration property specifies the amount of time (in seconds or milliseconds) that the transition will take to complete.

The Transition-timing-function property specifies the velocity curve of the transition effect.

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-

Bézier (N,n,n,n); Ease: Set a slow start and then get faster

The Transition-delay property specifies when the transition effect begins.

Example:

Div{width:100px;height:100px;background:blue;transition:width 2s;-moz-transition:width 2s,/* Firefox 4 */- Webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

CSS3 a detailed description of the Translate property

CSS3 a detailed description of the Background-size property

CSS3 function rotate () How to use