This is the 7th day of my participation in the August Text Challenge.More challenges in August

Title/ CSS Transform Complete Guide #flight.Archives007

Preface: The seventh day! Lifelong learning, persistent creation, living a tiny buried belief. I am selfless thinking, common progress!

A simple and efficient CSS Transform tutorial.

The Tag/Transform is introduced

CSS’s Transform allows elements to be deformed, such as rotated, scaled, tilted, or panned

element {
    transform: scale(0.5) translate(10px.10px); /* 'transform' allows multiple functions to be specified simultaneously.*/
}
Copy the code

In the code above, element is scaled by half and shifted 10px to the right and 10px to the bottom.

Let’s go through all the Transform functions that are now supported.

This section describes the Tag/ Transform functions

Matrix correlation function

  1. matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

    The rotate, scale, Skew, and Translate functions are all based on the matrix function

    However, the direct use of this function in actual practice is not much, most of them are indirect use of functions based on this method, so this paper will not introduce the method in detail.

    Just like WebGL in Canvas, JS library based on WebGL implementation is generally used in actual practice, such as three.js

    Details about the matrix matrix can see www.zhangxinxu.com/wordpress/2…

  2. matrix(a, b, c, d, tx, ty)

    This function is shorthand for Matrix3D (a, b, 0, 0, C, D, 0, 0, 0, 1, 0, tx, TY, 0, 1).

Perspective related functions

  1. perspective(l)

    L:

    , indicating the depth of perspective, effective when the value is positive

Rotate Correlation function

  1. rotate3d(x, y, z, a)

    X,y,z,a: < Angle >, abscissa, ordinate,z and clockwise rotation Angle

  2. rotate(a)

    A: < Angle >, indicating the clockwise rotation Angle

  3. rotateX(a)

    A: < Angle > indicates the rotation Angle of the x-coordinate

  4. rotateY(a)

    A: < Angle > indicates the rotation Angle of the ordinate

  5. rotateZ(a)

    A: < Angle > : indicates the rotation Angle of the Z coordinate

Scale related function

  1. scale3d(sx, sy, sz)

    Sx, SY, sZ: indicates the zoom size on the X, Y, and Z axes.

    When the value is 1, no scaling is performed. The value is scaled down in the range from 0 to 1 and scaled up in the range from >1.

    When the parameter is negative, the element is flipped around the center of the origin.

  2. scale(sx, [sy])

    Sx, SY (Optional): specifies the zoom size on the X and Y axes.

  3. scaleX(s)

    S: indicates the zoom size on the X axis.

  4. scaleY(s)

    S: indicates the zoom size on the Y axis.

  5. scaleZ(s)

    S: indicates the zoom size on the z-axis.

Skew correlation function

  1. skew(ax, [ay])

    Ax, ay(optional): < Angle >, the Angle at which the element is tilted along the X and Y axes

  2. skewX(a)

    A: < Angle >, the Angle at which the element is tilted along the X axis

  3. skewY(a)

    A: < Angle >, the Angle at which the element is tilted along the Y-axis

Translate related functions

Note: Translate is a CSS attribute and can be used independently. The usage is the same as the function.

  1. translate3d(tx, ty, tz)

    Tx, TY, TZ:

    , the translation distance of the element along the X,Y, and Z axes.

  2. translate(tx, [ty])

    Tx, TY (Optional):

    , the translation distance of the element along the X and Y axes.

  3. translateX(t)

    T:

    , the translation distance of the element along the X-axis.

  4. translateY(t)

    T:

    , the translation distance of the element along the Y axis.

  5. translateZ(t)

    T:

    , the translation distance of the element along the z-axis.

Tag/ transform-origin Attribute description

The transform-origin property changes the origin of an element’s deformation. The default value is Center

Value:

transform-origin: 2px; Transform-origin: 2px 2em; transform-origin: 2px 2em; Transform-origin: left top; transform-origin: left top; Transform-origin: top right; transform-origin: top right; transform-origin: top right; Transform-origin: 20px left; transform-origin: 20px left; /* This is an error representation. Transform-origin: 2px 10% 20px; transform-origin: 2px 10% 20px; /* If there are three values, the first two values are used unchanged, and the third value represents the depth of the origin (Z coordinates)*/Copy the code

->> Reference link

MDN 英 文 版 developer.mozilla.org/zh-CN/docs/…

MDN English document developer.mozilla.org/en-US/docs/…

Transform-origin description developer.mozilla.org/zh-CN/docs/…

CSS – Tricks css-tricks.com/almanac/pro…

Zhang Xinxu Matrix Matrix to www.zhangxinxu.com/wordpress/2…

Zhang Xinxu – CSS animations www.zhangxinxu.com/wordpress/2…

->> Version History

Currently V1.0, the next release is expected to add two places (functions and transform-origin) for flight.playground for interactive understanding

See the lot (@ flightmakers)

Release V0.1 in Nuggets on August 17, 2019

2021.8.18 Complete content. In V1.0, two links were added