How to use the transform gradient attribute in Css3
This article mainly introduces how to use the transform gradient attribute in Css3, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
The translate () prime moves from its current position, according to the given left (x coordinates) and top (y coordinates).
Translate defines 2d conversion xy to number x positive right negative left y positive bottom negative upper
Translate3d (xperiary z) defines 3D transformations
Scale () method, the size of the element increases or decreases, depending on the given width (X axis) and height (Y axis) parameters
Scale (XMagol y) defines 2D conversion x y as a multiple
Scale (2) converts width to twice the original size and height to four times the original height.
The rotate () method rotates the element clockwise at a given angle. Negative values are allowed and the element will be rotated counterclockwise
Rotate (30deg) means to rotate 30 degrees.
Matrix () method
Skew defines a 2D tilt transformation along the X and Y axes.
Transition transition attribute transition-property attribute specifies the name of the CSS attribute to which the transition effect is applied, 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 property specifies the speed curve of the transition effect.
Transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-
Bezier; ease: start slowly, then get faster.
The transition-delay attribute 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
}
Thank you for reading this article carefully. I hope the article "how to use transform gradient attributes in Css3" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
