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

This article mainly introduces the example analysis of CSS3 deformation, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

CSS3 deformation

Pages in CSS2.1 are static, and web designers are used to using it as a design tool for page effects. For years, Web designers relied on pictures, Flash, or JavaScript to modify the appearance of a page. CSS3 will change the way designers think. With CSS3, elements can be easily tilted, scaled, moved, and flipped.

In September 2012, the W3C released the working draft of CSS3 deformation. Allows CSS to transform elements into 2D or 3D space, and this draft includes CSS32D and CSS33D transformations. CSS3 deformation is a collection of effects, such as translation, rotation, scaling, and tilting, each of which is called a deformation function (Transform Function), which can manipulate elements to rotate, scale, translate, and so on. Previously, these effects depended on images, Flash, or JavaScript. Using pure CSS to complete these deformations does not need to load these additional files, which once again improves the development efficiency and the execution efficiency of the page.

CSS3 deformation attributes and functions:

CSS3 morphing allows dynamic control elements that can be moved around the screen, zoomed out or enlarged, rotated, or combined to produce complex animation effects. With CSS morphing, you can make elements produce static visual effects, or you can easily combine CSS3's transition with animation's keyframe to produce some animation effects:

There are XY functions available in CSS3 transformations: translateX (), translateY (), scaleX (), scaleY (), skewX (), and skewY ().

1Query CSS3 2D deformation function includes: translate (), scale (), rotate () and skew (). The translate () function accepts CSS's standard unit of measure; the scale () function accepts a decimal value between 0,1; and both the rotate () and skew () functions accept a radial unit of measure value deg. Except for the rotate () function, each function takes arguments on the X and Y axes. There is also a matrix matrix () function in the 2D transformation, which includes six parameters.

2the 3D deformation functions of rotateX CSS3 include: rotateX (), rotateY (), rotate3d (), translateZ (), translate3d (), scaleZ () and scale3d (). The 3D deformation also includes a matrix matrix3d () function, including 16 parameters.

Detailed description of CSS deformation attributes:

The transform attribute refers to a set of conversion functions. The transform-origin attribute specifies where the center point of the element is, and a third number, transform-origin-z, is added to control the center point of the element's three-dimensional space. The value of transform-style is set to preserve- 3D to establish a 3D rendering environment.

: CSS3 2D deformation

In 2D or 3D space, elements can be distorted, shifted, or rotated. It's just that 2D deformations work on the X and Y axes, which are commonly known as horizontal and vertical axes, while 3D deformations work in addition to the X and Y axes, and there is a Z axis, and these 3D transformations define not only the length and width of the element, but also the depth. First discuss how elements are transformed in the 2D plane, and then move on to the 3D transformation. CSS32D transformations give Web designers more freedom to decorate and transform HTML components, as well as more features to decorate text and more animation options to decorate div elements. 2D displacement here translate is a way to move an element in a specified direction, similar to relative in position. It can be simply understood that you can use the translate () function to move elements from their original position without affecting any components on the X or Y axes. Http:/ / www.iis7.com/b/wzjk/

The translate () function can take either one value tx or two values tx and ty

Tx: the length of the vector that represents the movement of the X axis (Abscissa). When the value is positive, the element moves to the right of the X axis, and vice versa, the element moves to the left of the X axis.

Ty: the length of a vector that represents the movement of the Y axis (ordinate). When the value is positive, the element moves down the Y axis, and vice versa, the element moves up the Y axis. If ty is not explicitly set, it is equivalent to ty=0.

Taken together, the translate () function moves elements in the following three main ways.

-move horizontally: move translate (tx, 0) to the right and translate (- tx, 0) to the left.

-Vertical movement: move translate up (0j-ty) and translate down (0, ty).

Diagonal movement: translate (tx, ty) in the lower right corner, translate (tx,- ty) in the upper right corner, translate (- tx,- ty) in the upper left corner and translate (- tx, ty) in the lower left corner.

If you want to move the object in one direction, such as along the horizontal or vertical axis, you can use translate (tx, 0) and translate (0, ty). In fact, it also provides an easier way to move objects in a single direction during deformation.

TranslateX (): moves an object horizontally. Specifies the displacement of the object along the horizontal axis by giving a numeric value in the X axis direction. To put it simply, the object moves only toward the X axis, moving to the right if the value is positive, and to the left if the value is negative.

TranslateY (): moves an object in the vertical axis. Specifies the displacement of the object along the longitudinal axis by giving a numeric value in the Y axis direction. To put it simply, the object moves only toward the Y axis, if the value is positive, the object moves down; if the value is negative, the object moves up. These two functions differ from the translate () function described earlier in that each method accepts only one value.

Transform: translate (- 100px, 0) is actually equal to transform: translateX (- 100px).

Transform: translate (zero 100px) is actually equal to transform: translateY (- 100px).

2D Scalin

The scaling function scale () lets the element scale the object according to the central origin, with a default value of 1. So 0. 01 to 0. Any value between 99 makes an element smaller, while anything greater than or equal to 1. 01 makes the element appear larger.

The syntax of the scale scale () function is very similar to that of the translate () function, which accepts either one value or two values, and when there is only one value, the second value is equal to the first value by default.

The values are simply described as follows:

Sx: specifies the scaling vector in the direction of the horizontal coordinates (X axis), if the value is 0. 0. 01 ~ 0. Between 99, the object zooms out in the X-axis direction, if the value is greater than or equal to 1. 01, the object zooms in on the X axis.

Sy: specifies the amount of scaling in the direction of the longitudinal coordinates (Y axis), if the value is 0. 01 ~ 0. Between 99, the object zooms out in the Y axis, if the value is greater than or equal to 1. 01, the object zooms in on the Y axis.

ScaleX (): equivalent to scale (sx, 1). Indicates that the element scales only on the X axis (horizontally), with a default value of 1.

ScaleY (): equivalent to scale (1, sy). Indicates that the element is scaled only on the Y axis (vertical and horizontal), and the default value is 1.

2D rotation

The rotation function rotate () specifies a 2D rotation of the element based on the origin of the object through the specified angle parameter. The operation is mainly carried out in two-dimensional space, accepting an angle value that is used to specify the amplitude of rotation. If this value is positive, the element rotates clockwise relative to the origin center; if the value is negative, the element rotates counterclockwise relative to the origin center.

The rotate () function accepts only one value a, which represents the angle value of the rotation. The value can be positive or negative.

When the value is positive, the element by default rotates clockwise relative to the center point of the element.

When the value is negative, the element rotates counterclockwise by default relative to the center point of the element.

2D tilt

The tilt function skew () allows elements to be tilted and an object can be tilted at a certain angle around the X and Y axes with its central position. Unlike the rotation of the rotate () function, the rotate () function just rotates and does not change the shape of the element. The skew () function does not rotate, but only changes the shape of the element.

Ax: specifies the angle at which the element is tilted horizontally (X-axis).

Ay: specifies the angle at which the element is tilted vertically (Y-axis).

The skew () function is the same as the translate () and scale () functions in CSS3 deformation, except that you can use the skew (tx, ty) function to tilt the element at the center of the element at the origin on the X and Y axes, but also use the skewX () and skewY () function to tilt elements only horizontally or vertically.

SkewX (): equivalent to skew (ax, 0) and skew (ax). Specifies a tilt deformation along the X axis at a given angle. SkewX () causes the element to be based on its center and skew in the horizontal direction (X axis).

SkewY (): equivalent to skew (0, ay). Specifies a tilt deformation along the Y axis at a given angle. SkewY () is used to set the element to be tilted and deformed vertically (Y axis) at a given angle based on its center.

By default, the skew () function tilts the element based on its original center point, but it can also reset the element base point to skew the element based on the transform- origin attribute. In addition, the skew () function is similar to the morph tool in graphics software.

2D matrix

Transform in CSS3 makes it easy to manipulate deformations, such as displacement function translate () scaling function scale (), rotation function rotate () and tilt function skew (). These functions are simple and convenient, but the matrix function matrix () in deformation is not commonly used. Of course, Web designers can use the rotate (), skew (), scale (), and translate () functions to meet their deformation needs, so why use the matrix matrix ()? All morph functions in CSS3 can be replaced by the matrix () function.

: CSS3 3D deformation

Using a two-dimensional deformation can change the element on both the horizontal and vertical axes, but there is also an axis along which you can change the element. With 3D deformations, you can change the position of the element on the Z axis. 3D transformations use the same attributes based on 2D transformations, and if you are familiar with 2D transformations, you will find that 3D deformations function similar to 2D transformations. 3D transformation in CSS3 mainly includes the following functions:

3D displacement: including translateZ () and translate3d () two function functions.

3D rotation: includes four functions: rotateX (), rotateY (), rotateZ () and rotate3d ().

3D scaling: includes two functions, scaleZ () and scale3d ().

3D matrix: like 2D deformations, there is a 3D matrix function matrix3d ().

3D displacement in CSS3

It mainly includes two functions: translateZ () and translate3d ().

1. Syntax of the translate3d () function the translate3d () function makes an element move in three-dimensional space. This deformation is characterized by the use of the coordinates of a three-dimensional vector to define how much the element moves in each direction.

Translate3d (tx, ty, tz)

The attribute values are described as follows:

Tx: represents the length of the transverse coordinate displacement vector

Ty: represents the length of the longitudinal coordinate displacement vector

Tz: represents the length of the Z-axis displacement vector. This value cannot be a percentage value. If the value is a percentage value, it will be considered invalid.

2. TranslateZ () function, which allows elements to move along the Z axis in 3D space.

Translate (t)

The value t refers to the vector displacement length of the Z axis. Use the translateZ () function to make the element shift on the Z axis, and when its value is negative, the element moves farther and farther on the Z axis, causing the element to become smaller. Conversely, when its value is positive, the element moves closer and closer on the Z axis, causing the element to become larger.

The translateZ () function is the same as translate3d (0,0, tz) in practical use. From a visual point of view, the translateZ () and translate3d (0,0, tz) functions are very similar to the scale () scaling function in two-dimensional space, but in fact they are completely different. The deformations of translateZ () and translate3d occur on the Z axis, not on the X and Y axes. When using 3D deformations, being able to move an element on the Z axis does have great benefits, such as when creating a 3D cube box.

3D scaling in CSS3

The scaleZ () and scale3d () functions have no effect when used alone, and need to be used in conjunction with other morph functions to have an effect.

The scaling in CSS3 3D deformation mainly has two functions: scaleZ () and scale3d (). When the X axis and Y axis in scale3d () are 1 at the same time, that is, scale3d (1, 1, sz), the effect is the same as scaleZ (sz).

1. ScaleZ () 3D scaling function, which allows elements to scale proportionally on the Z axis. The default value is 1. When the value is greater than 1, the element is enlarged, less than 1 and greater than 0. At 01:00, the element shrinks.

Scale3d (sx, sy, sz)

Sx: landscape Scal

Sy: portrait scale

Sz: Z axis scaling scale.

3D rotation in CSS3

In 3D deformation, you can rotate the element on any axis. To do this, CSS3 adds three new rotation functions, rotateX (), rotateY (), and rotateZ ().

In 3D space, using the rotateX (), rotateY (), and rotateZ () functions to rotate an element around the X, Y, and Z axes, the basic syntax is as follows:

RotateX (a)

RotateY (a)

RotateZ (a)

Where a refers to a rotation angle value, which can be positive or negative. If the value is positive, the element rotates clockwise; conversely, if the value is negative, the element rotates counterclockwise.

The rotateZ () function specifies that the element rotates around the Z axis, and if viewed only from a visual point of view, the rotateZ () function rotates the element clockwise or counterclockwise with the same effect as rotate (), but not in a 2D plane. In 3D space, in addition to rotateX (), rotateY () and rotateZ () functions that make an element rotate in 3D space, there is also an attribute function rotate3d (). In 3D space, rotation has three angles to describe a rotation axis. The rotation of the axis is made by a [x, y, z] vector and passes through the origin of the element. Its basic syntax is as follows:

Value description in rotate3d (x, y, z, a) rotate3d ().

The value of x: 0 ~ 1, used to describe the vector value of the rotation of the element around the X axis.

The value of y: 0 ~ 1 is used to describe the vector value of the rotation of the element around the Y axis.

The value of z: 0 ~ 1 is used to describe the vector value of the rotation of the element around the Z axis.

A: angle value, which is used to specify the angle at which the element rotates in 3D space. If the value is positive, the element rotates clockwise, whereas the element rotates counterclockwise. When the values of x, y, z are 0 at the same time, the element does not do any rotation in 3D space. When x, y, z take different values, it is equivalent to the three rotation functions described earlier.

The rotateX (a) function is equivalent to rotate3d (1, 0, 0, a).

The rotateY (a) function is equivalent to rotate3d (0,1,0, a).

The rotateZ (a) function is equivalent to rotate3d (0,0,1, a).

Thank you for reading this article carefully. I hope the article "sample Analysis of CSS3 deformation" 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.