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

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!

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.