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

This article mainly introduces how to use the transform attribute in css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

CSS3transform attribute

Purpose: the transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

Syntax:

Transform:none | transform-functions

There can be an attribute value description:

None: definitions are not converted.

Matrix: defines a 2D transformation that uses a matrix of six values.

Matrix3d defines the 3D transformation, using a 16-value 4x4 matrix.

Translate (XBI y): defines a 2D transformation.

Translate3d (XMagneyMagnez): defines 3D transformations.

TranslateX (x): defines the transformation, using only the value of the X axis.

TranslateY (y): defines the transformation, using only the value of the Y axis.

TranslateZ (z): defines a 3D transformation, using only the value of the Z axis.

Scale (XBI y): defines a 2D scaling transformation.

Scale3d (xperiary z): defines 3D scaling transformations.

ScaleX (x): defines the scaling transformation by setting the value of the X axis.

ScaleY (y): defines the scaling transformation by setting the value of the Y axis.

ScaleZ (z): defines the 3D scaling transformation by setting the value of the Z axis.

Rotate (angle): defines 2D rotation and specifies the angle in the parameters.

Rotate3d (XMagneyMagnezMagneAngle): defines 3D rotation.

RotateX (angle): defines a 3D rotation along the X axis.

RotateY (angle): defines a 3D rotation along the Y axis.

RotateZ (angle): defines a 3D rotation along the Z axis.

Skew: defines a 2D tilt transformation along the X and Y axes.

SkewX (angle): defines a 2D tilt transformation along the X axis.

SkewY (angle): defines a 2D tilt transformation along the Y axis.

Perspective (n): defines a perspective view for 3D transformation elements.

Note: InternetExplorer10, Firefox, Opera support the transform attribute. InternetExplorer9 supports the alternative-ms-transform attribute (for 2D transformations only). Safari and Chrome support alternative-webkit-transform attributes (3D and 2D conversions). Opera only supports 2D transformations.

An example of using the CSS3transform attribute

*, *: after,*:before {

Box-sizing:border-box

}

Body {

Background:#F5F3F4

Margin:0

Padding:10px

Font-family:'OpenSans',sans-serif

Text-align:center

}

H3,h5 {

Font-weight:400

Color:#4d4d4d

}

.card {

Display:inline-block

Margin:10px

Background:#fff

Padding:10px

Min-width:180px

Box-shadow:03px5px#ddd

Color:#555

}

.card.box {

Width:60px

Height:60px

Margin:auto

Background:#ddd

Cursor:pointer

Box-shadow:005px#cccinset

}

.card.box.fill {

Width:60px

Height:60px

Position:relative

Background:#03A9F4

Opacity:.5

Box-shadow:005px#ccc

-webkit-transition:0.3s

Transition:0.3s

}

.cardp {

Margin:25px00

}

.rotate: hover.fill {

-webkit-transform:rotate (45deg)

Transform:rotate (45deg)

}

.rotateX: hover.fill {

-webkit-transform:rotateX (45deg)

Transform:rotateX (45deg)

}

.rotateY: hover.fill {

-webkit-transform:rotateY (45deg)

Transform:rotateY (45deg)

}

.rotateZ: hover.fill {

-webkit-transform:rotate (45deg)

Transform:rotate (45deg)

}

.scale: hover.fill {

-webkit-transform:scale (2pr 2)

Transform:scale (2Jing 2)

}

.scaleX: hover.fill {

-webkit-transform:scaleX (2)

Transform:scaleX (2)

}

.scaleY: hover.fill {

-webkit-transform:scaleY (2)

Transform:scaleY (2)

}

.skew: hover.fill {

-webkit-transform:skew (45deg)

Transform:skew (45degence45deg)

}

.skewX: hover.fill {

-webkit-transform:skewX (45deg)

Transform:skewX (45deg)

}

.skewY: hover.fill {

-webkit-transform:skewY (45deg)

Transform:skewY (45deg)

}

.translate: hover.fill {

-webkit-transform:translate (45pxmem1em)

Transform:translate (45px101em)

}

.translateX: hover.fill {

-webkit-transform:translateX (45px)

Transform:translateX (45px)

}

.translateY: hover.fill {

-webkit-transform:translateY (45px)

Transform:translateY (45px)

}

.matrix: hover.fill {

-webkit-transform:matrix (2pr 2j0pr 2pr 45pc0)

Transform:matrix (2, 2, 0, 0, 2, 4, 5, 5, 0)

}

Rotate (45deg)

RotateX (45deg)

RotateY (45deg)

RotateZ (45deg)

Scale (2)

ScaleX (2)

ScaleY (2)

Skew (45degence45deg)

SkewX (45deg)

SkewY (45deg)

Translate (45px)

TranslateX (45px)

TranslateY (45px)

Matrix (2, 2, 0, 0, 2, 4, 5, 5, 0)

Thank you for reading this article carefully. I hope the article "how to use transform attributes in css" 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.