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

This article mainly shows you "what are the transformation attributes in css3", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the transformation attributes in css3" this article.

There are 6 css3 transformation attributes: 1, transform;2, transform-origin;3, transform-style;4, perspective;5, perspective-origin;6, backface-visibility.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 transformations can move, scale, rotate, lengthen, or stretch elements.

Css3 transform attribute (2D/3D transform)

Attribute description CSStransform for 2D or 3D conversion elements 3transform-origin allows you to change the position of converted elements how to nest elements in 3transform-style3D space 3perspective specifies how 3D elements are viewed in perspective 3perspective-origin specifies the bottom position of 3D elements 3backface-visibility defines whether an element should be visible, when not facing the screen 3

Example:

# rotate2D, # rotate3D {width: 80px; height: 70px; color: white; font-weight: bold; font-size: 15px; padding: 10px Float: left; margin-right: 50px; border-radius: 5px; border: 1px solid # 0000000; background: red; margin: 10px Transition:transform 2s;-webkit-transition:transform 2s; / * Safari * /} # rotate2D:hover {transform: rotate (180deg) } # rotate3D:hover {transform: rotateY (180deg);} 2D conversion 3D conversion

Expand knowledge:

2D conversion method

Function description matrix defines a 2D transformation using a matrix of six values. Translate (XBI y) defines a 2D transformation that moves elements along the X and Y axes. TranslateX (n) defines a 2D transformation that moves elements along the X axis. TranslateY (n) defines a 2D transformation that moves elements along the Y axis. Scale (XBI y) defines a 2D scaling transformation that changes the width and height of the element. ScaleX (n) defines a 2D scaling transformation that changes the width of the element. ScaleY (n) defines a 2D scaling transformation that changes the height of the element. Rotate (angle) defines 2D rotation and specifies the angle in the parameters. Skew defines a 2D tilt transformation along the X and Y axes. SkewX (angle) defines a 2D skew transformation along the X axis. SkewY (angle) defines a 2D skew transformation along the Y axis.

3D conversion method

Function description matrix3d (n _ n

) define 3D transformations, using 16-valued 4x4 matrices. Translate3d (XMagneyMagnez) defines 3D conversion. TranslateX (x) defines the 3D conversion, using only the values used for the X axis. TranslateY (y) defines the 3D conversion, using only the values used for the Y axis. TranslateZ (z) defines the 3D conversion, using only the values used for the Z axis. Scale3d defines 3D scaling transformations. ScaleX (x) defines a 3D scaling transformation, given an X-axis value. ScaleY (y) defines a 3D scaling transformation, given a value of the Y axis. ScaleZ (z) defines a 3D scaling transformation, given the value of a Z axis. Rotate3d (XMagneyMagnez.Angle) defines 3D rotation. RotateX (angle) defines 3D rotation along the X axis. RotateY (angle) defines 3D rotation along the Y axis. RotateZ (angle) defines 3D rotation along the Z axis. Perspective (n) defines a perspective view of a 3D transformation element. The above is all the content of the article "what are the transformation properties in css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.