CSS3 Advanced -5 CSS Conversion (introduction, 2D conversion, 3D conversion)

Introduction of conversion

Conversion overview

-conversion is an effect that changes the shape, size, and position of an element

-also known as Warp, that is, you can apply 2D or 3D transformations to elements to rotate, scale, move, or skew elements

-2D Conversion: Changes the elements on the x-axis and y-axis planes, changing their shape, size, and position

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7D/E3/wKioL1byTR_iN-aVAABNmqr3oas948.png "title=" Web.png "alt=" Wkiol1bytr_in-avaabnmqr3oas948.png "/>

-3D Conversion: Elements can also be changed on the Z axis

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/E6/wKiom1byT6vyQX2TAAAxu1EifnA024.png "title=" Web.png "alt=" Wkiom1byt6vyqx2taaaxu1eifna024.png "/>

Conversion properties

-Transform properties Apply 2D or 3D transformations to elements

-Specify a set of conversion functions to take a value

-Transform:none/transform-function;

-None

-default value, which indicates that the element is not converted

-Transform-function

-represents one or more conversion functions, separated by a space

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/E7/wKiom1byUdajisvNAAEoTxgfzbo045.png "title=" Web.png "alt=" Wkiom1byudajisvnaaeotxgfzbo045.png "/>

Origin of the transformation

-The Transfor-origin property is used to specify the location of the element's transformation origin.

-By default, the origin of the transformation is at the center point of the element

-or 50% of the x-axis and y-axis

-Transform-origin: Value/percent/keyword;

-One value: Indicates the position of all axes

-two values; Represents the X-axis and Y-axis

-Three values: X-axis, Y-axis, and Z-axis

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/E8/wKiom1byVKGgAKwQAAB5cVJW-jM597.png "title=" Web.png "alt=" Wkiom1byvkggakwqaab5cvjw-jm597.png "/>

Conversion

-The Translate () method moves the element from its current position

-Move to x-coordinate and y-coordinate position parameters

-Translate (x) or translate (× x, Y)

-Desirable values

-Value, percent

-can also be negative

-One-way displacement function can also be used

-Translate (x)

-Translate (Y)

Shift

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/E5/wKioL1byVvmhV5KEAADDgROFX_k862.png "title=" Web.png "alt=" Wkiol1byvvmhv5keaaddgrofx_k862.png "/>

Zoom

-scale () method to change the dimensions of the element

-Depending on the given width (x-axis) and height (Y-axis)

-scale (×) or scale (x, y)

-one parameter, the second parameter is equal to the first value by default

-Desirable values

-Default value is 1

-Reduced: Data between 0 and 1

-Zoom in: values greater than 1

-You can also use the one-way zoom function

-ScaleX (x)

-ScaleY (Y)

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/E8/wKiom1byV2Gw7u22AAC9nGsyjS8749.png "title=" Web.png "alt=" Wkiom1byv2gw7u22aac9ngsyjs8749.png "/>

Rotation

-Rotate () method for rotating elements

-Rotates the element clockwise by the given angle according to the origin.

-Allow negative values, elements will rotate counterclockwise

-Rotate (deg)

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7D/E8/wKiom1byWauiqEj4AAGAT6B7yq0395.png "title=" Web.png "alt=" Wkiom1bywauiqej4aagat6b7yq0395.png "/>

Tilt

-The skew () method is used to tilt the element

-tilt at a certain angle around the x and Y axes at the origin location

-May change the shape of the element

-Skew (x) or skew, x, y, value angle

-One-way tilt function can also be used

-Skewx (x)

-Skewy (Y)

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/E5/wKioL1byWuDi-edCAAGQ3PPK6p0651.png "title=" Web.png "alt=" Wkiol1bywudi-edcaagq3ppk6p0651.png "/>

Second, 3D conversion

Perspective Property

-The Perspective property defines the distance of the 3D element from the view, measured in pixels

-When you define a perspective property for an element, its child elements get a perspective instead of the element itself

-Affects only 3D conversion elements

-Browser compatibility

-Chrome and Safari support alternative-webkit-perspective properties

3D displacement

-3D displacement can change elements in z-axis position

-3D displacement mainly includes

-Translatez (Z)

-Translate3d (x, Y, z)

3D rotation

-3D rotation mainly includes

-Rotatex (deg)

-Rotatey (deg)

-Rotatez (deg)

-Rotate3d (X,Y,Z,DEG)

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/E5/wKioL1byXV6ggS-JAAGi5Cnnlvc352.png "title=" Web.png "alt=" Wkiol1byxv6ggs-jaagi5cnnlvc352.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7D/E8/wKiom1byXPGxH1dBAAHUKdfqGAA500.png "title=" Web.png "alt=" Wkiom1byxpgxh1dbaahukdfqgaa500.png "/>

3D Zoom

-3D scaling mainly includes

-Scalez (Z)

-Scale3d (x, Y, z)

Summary: This chapter mainly introduces the advanced -5 CSS Conversion of CSS3 (Introduction, 2D conversion, 3D conversion)

This article from the "Technical Exchange" blog, declined reprint!

CSS3 Advanced -5 CSS Conversion (introduction, 2D conversion, 3D conversion)