How to use the transform gradient attribute in CSS3

We know that the translate element is to move the element from its current position and perform the displacement according to the coordinates we have given. Let’s explain translate in detail and make a small case to help everyone understand. Let’s take a look.

translate() moves the element from its current position according to the given left (x coordinate) and top (y coordinate)

translate(x,y) defines the 2d transformation xy to the number x Positive is right, negative is left, y is positive, down, negative is up.

translate3d(x,y,z) defines the 3D transformation

scale() method. The size of the element will increase or decrease according to Given the width (X axis) and height (Y axis) parameters

scale(x,y) defines the 2D transformation x y as a multiple

scale(2,4) converts the width to the original 2 times the size, convert the height to 4 times the original height

rotate() method rotates the given angle clockwise. Negative values ​​are allowed, the element will be rotated counterclockwise

rotate(30deg) means rotated 30 degrees

matrix() method

skew(x-angle,y-angle) definition 2D tilt transformation, along the X and Y axes.

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

transition -property: none|all|property;

The transition-duration property specifies the time (in seconds or milliseconds) it takes to complete the transition effect.

The transition-timing-function attribute specifies the speed curve of the transition effect.

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

bezier(n,n,n,n); ease : Specifies to start slowly and then become faster

The transition-delay attribute specifies when the transition effect starts.

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;
}

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

CSS3’s detailed introduction to the translate attribute

CSS3’s detailed introduction to the background-size attribute

How to use CSS3 function rotate()

The above is the detailed content of How to use the transform gradient attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!