This is the 21st day of my participation in the August More Text Challenge

transform

The transform property allows you to rotate, scale, tilt, or pan a given element. By modifying the coordinate space of the CSS visual formatting model.

As a rule of thumb, inline boxes (display: inline) do not work.

This property can accept one or more CSS transform functions. We divided the effect into 2D and 3D, and introduced one by one.

transform-origin

Transform-origin, which changes the origin of an element’s deformation. The default value is center.

  • A value: must be<length>.<percentage>Or,left.center.right.top.bottomOne of the keywords.
  • Two values: One of them must be<length>.<percentage>Or,left.center.rightOne of the keywords. The other one has to be<length>.<percentage>Or,top.center.bottomOne of the keywords.
  • Three values: The first two values are used the same as if there were only two values. The third value must be<length>. It always stands forZAxis offset.

The 2 d transformation

The translate () translation

Translate (), which repositions elements horizontally and/or vertically. Its parameters define the offset of the element in each direction.

Grammar:

translate(<length-percentage> , <length-percentage>?)
Copy the code

The parameter type is

. If the parameter type is percentage, the abscissa parameter is based on its width and the ordinate parameter is based on its height.

  • One argument: represents the abscissa. The abscissa defaults to 0.
  • Two parameters: represents the x-coordinate and the y-coordinate.
transform: translate(100px.200px);
Copy the code

translateX()

TranslateX (), which means to move an element horizontally in a two-dimensional plane. TranslateX (tx) is equal to translate(tx) or translate(tx,0).

transform: translateX(200px);
Copy the code

translateY()

TranslateY (), which means to move an element vertically in a two-dimensional plane. TranslateY (ty) is equal to Translate (0,ty).

transform: translateY(200px);
Copy the code

Rotate the rotate ()

Rotate (), which defines a transformation that rotates elements around a fixed point (specified by the transform-origin attribute, which defaults to the center of the element) without deformation.

Grammar:

rotate(a)
Copy the code
  • If the Angle (a) is positive, the rotation is clockwise
  • If the Angle (a) is negative, the rotation is counterclockwise
  • A rotation of 180 degrees is called point inversion
transform: rotate(45deg);
Copy the code

The zoom scale ()

Scale (), used to modify the size of an element (zoom in or out) on a two-dimensional plane.

Grammar:

scale(sx, sy?)
Copy the code
  • sxRepresents the abscissa of the scaling vector.
  • syRepresents the ordinate of the scaling vector. If not, the default value is set tosx, the element is being scaled at its original scale.

Coordinate value size:

  • [- 1, 1]: to reduce the
  • (- up, 1), (1, up):
  • Negative: the size is changed after the reflection of pixels.
transform: scale(2.0.5);
Copy the code

scaleX()

ScaleX (), which scales only on the x-coordinate, scaleX(sx) is the same as scale(sx, 1), which is an abbreviation.

transform: scaleX(2);
Copy the code

scaleY()

ScaleY (), which scales only the vertical coordinate, scaleY(sx) is the same as scale(1, SY), which is an abbreviation.

transform: scaleY(2);
Copy the code

Skew ()

Skew (), which defines the skew conversion of an element on a two-dimensional plane.

This transformation is a shear mapping (crosscutting) that twists each point within a cell by an Angle horizontally and vertically. The coordinates of each point are adjusted proportionally according to the specified Angle and the distance from the origin; Thus, the further away a point is from the origin, the greater its increment.

Grammar:

skew(ax, ay?)
Copy the code
  • ax, distorts the Angle of the element along the abscissa.
  • ay, distorts the Angle of the element along the ordinate. If not defined, it defaults to 0, resulting in a pure horizontal skew.
transform: skew(40deg.30deg);
Copy the code

skewX()

SkewX (), a horizontal skew in a two-dimensional plane. SkewX (a) is equivalent to Skew (a).

transform: skewX(40deg);
Copy the code

skewY()

SkewY (), a vertical tilt in a two-dimensional plane. SkewY (a) is equal to skew(1,a).

transform: skewY(40deg);
Copy the code

matrix()

Matrix () specifies a 2D transformation matrix consisting of the specified six values. The final parameters of the transformation are calculated from this matrix.

Grammar:

matrix(a, b, c, d, tx, ty)
Copy the code

After calculation, we can find that these six values can be corresponding to:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
Copy the code

3 d conversion

The rotate rotating

rotateX()

RotateX () defines a transformation that rotates an element around the ** x-coordinate (horizontal axis)** without deforming it.

  • If it is positive, it moves clockwise;
  • If it is negative, it moves counterclockwise.
transform: rotateX(45deg);
Copy the code

rotateY()

RotateY () defines a transformation that rotates an element around the ** ordinate (vertical axis)** without deforming it.

transform: rotateY(45deg);
Copy the code

rotateZ()

RotateZ () rotates an element around the horizontal z-axis without deforming it, so rotateZ(a) is the same thing as rotate(a).

rotate3d()

Rotate3d () starts with the origin (set according to transform-origin, default is (0,0,0)) and ends with the vector (x,y,z) as the axis. According to the left hand rule, select Angle.

Grammar:

rotate3d(x,y,z,angle)
Copy the code

Rotate the vector from (0,0,0) to (1,1,1) by 45 degrees:

transform: rotate3d(1.1.1.45deg);
Copy the code

translateZ()

TranslateZ (), which means to move an element in the Z-axis direction in three dimensions. TranslateZ (tz) is equal to translate3d(0,0,tz).

scaleZ()

ScaleZ (), which scales only Z coordinates, scaleZ(sz) is equivalent to scale3D (1, 1,sz), which is an abbreviation.

Compare before and after scaling and feel the stretching on the Z axis:

transform: scaleZ(1);
Copy the code

transform: scaleZ(1.4);
Copy the code

The perspective of perspective

perspective()

Perspective specifies the distance between the observer and the z=0 plane, so that elements with three-dimensional position transformations can have perspective effects. The three-dimensional element z>0 is larger than normal, and z<0 is smaller than normal.

  • noneNo applicationperspectiveThe default value when styling.
  • <length> <length>Specify observer distancez=0Plane distance, apply perspective transformation to elements and their contents.When the value is 0 or negative, there is no perspective transformation.

perspective-origin

Perspective-origin specifies the location of the observer,

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query