CSS transform Complete Guide (Second Edition) flight.archives 007

Title/ CSS Transform A complete guide ( The second edition ) #flight.Archives007

order : V2.1 了 ! Lifelong learning , Insist on creating , Bury a small faith in life . I am a Selfless thinking , Common progress !

brief introduction : The most simple and efficient CSS Transform course .

Tag/ Transform Introduce

CSS Of transform You can make elements deform , Like rotation , The zoom , Tilt or translate

element {
    transform: scale(0.5) translate(10px, 10px); /*`transform`  Support specifying multiple functions at the same time .*/
}

In the above code element Will scale by half , Translate right and down at the same time 10px.

Next, let's introduce all the supported Transform function .

Tag/ Transform Function introduction

Matrix( Matrix computing ) Correlation function

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

   This function involves knowledge of Advanced Mathematics , Matrix transformation , It's very complicated to use , Later on rotate, scale, skew, translate Functions are based on this matrix Functionally implemented

   However, it is not easy to use this function directly in practice , Most of them use functions implemented based on this method indirectly , Therefore, this paper does not introduce this method in detail .

   It's like Canvas Medium webgl, In actual combat, it is generally based on webgl Realized JS library , Such as three.js

   About matrix matrix For details, see https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix- matrix /

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

   This function is matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) Short form of .

Perspective( Perspective depth ) Correlation function

3. perspective(l)

   l: <length>, Represents the perspective depth , Takes effect when the value is positive

Rotate( rotate ) Correlation function

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

   x,y,z,a: <angle>, Abscissa , Ordinate , Z coordinate and Clockwise rotation angle

5. rotate(a)

   a: <angle>, Represents the angle of clockwise rotation

6. rotateX(a)

   a: <angle>, Represents the angle of abscissa rotation

7. rotateY(a)

   a: <angle>, Represents the rotation angle of the ordinate

8. rotateZ(a)

   a: <angle>, Express Z The angle of coordinate rotation

Scale( The zoom ) Correlation function

9. scale3d(sx, sy, sz)

   sx, sy, sz: <percentage>, stay X Axis , Y Axis , Z Scale size on axis .

   The parameter value is 1 Do not scale when , stay [0~1] The interval is scaled down , stay [>1] Zoom in when .

   When the parameter takes a negative value, the element will flip along the center of the origin .

10. scale(sx, [sy])

    sx, sy( Optional ): <percentage>, stay X Axis , Y Scale size on axis .

11. scaleX(s)

    s: <percentage>, stay X Scale size on axis .

12. scaleY(s)

    s: <percentage>, stay Y Scale size on axis .

13. scaleZ(s)

    s: <percentage>, stay Z Scale size on axis .

Skew( tilt ) Correlation function

14. skew(ax, [ay])

    ax, ay( Optional ): <angle>, Element along X Axis and Y Angle of shaft inclination

15. skewX(a)

    a: <angle>, Element along X Angle of shaft inclination

16. skewY(a)

    a: <angle>, Element along Y Angle of shaft inclination

Translate( translation ) Correlation function

remarks : translate It's a CSS attribute , Can be used alone , The usage is consistent with the function .

17. translate3d(tx, ty, tz)

    tx, ty, tz: <length>, Element along X Axis ,Y Axis and Z Distance of axis translation .

18. translate(tx, [ty])

    tx, ty( Optional ): <length>, Element along X Axis and Y Distance of axis translation .

19. translateX(t)

    t: <length>, Element along X Distance of axis translation .

20. translateY(t)

    t: <length>, Element along Y Distance of axis translation .

21. translateZ(t)

    t: <length>, Element along Z Distance of axis translation .

Tag/ Transform Introduction to related properties

1. transform-origin

   Specify the origin of the element deformation , The default value is center.

   Value for :

   transform-origin: 2px; /* If there is only one value ,  Represents the abscissa of the origin */
   
   transform-origin: 2px 2em; /* If you have two values ,  Represents the abscissa and ordinate of the origin respectively */
   
   transform-origin: left top; /* Keywords can be used : left, center, right, top  or  bottom*/
   
   transform-origin: top right; /* If both values are keywords ,  You can start with the ordinate ,  Rear abscissa */
   
   transform-origin: 20px left; /* This is a false indication .  If keywords and length units are used at the same time ,  Not all can represent ordinate or abscissa */
   
   transform-origin: 2px 10% 20px; /* If there are three values ,  Then the usage of the first two values remains unchanged ,  The third value represents the depth of the origin (Z coordinate )*/
   

2. transform-style

   The child element of the specified element is located at 3D In space or in plane , The default value is flat.

   Value for :

   transform-style: flat; /* The child elements are in separate planes */
   
   transform-style: preserve-3d; /* The child element position is inherited from the parent element 3d Location */
   

3. transform-box

   Specifies the deformed layout box

   Value for

   /* Don't understand CSS Box Model Of ,  You can search ,  This article does not cover in detail .*/
   transform-box: content-box /* Use the content box to layout the box */
   
   transform-box: border-box /* Use the border box to layout the box */
   
   transform-box: fill-box /* Use the filled bounding box to lay out the box ,  A filled bounding box is a box that contains only the geometry of the element .  For basic shapes ,  This is the filled area .*/
   
   transform-box: stroke-box /* Use the tracing border to lay out the box .  A stroke border is a bounding box that contains the geometry of an element and its stroke shape .*/
   
   transform-box: view-box /* Use the of the nearest parent element SVG Viewport Is the box layout */
   

4. perspective

   Can be an independent CSS attribute , Specify the perspective depth , Consistent with the method used as a function .

5. perspective-origin

   It specifies 3d The observer's position , The value is perspective The vanishing point of the attribute

   Value for :

   /*x-position  and  y-position  All are  <length-percentage>  value ,  Negative values are acceptable */
   
   /*
    Available keywords : 
   x-position: left(0%), center(50%), right(100%)
   y-position: top(0%), center(50%), bottom(100%)
   */
   
   perspective-origin: x-position; /* A value */
   
   perspective-origin: x-position y-position; /* Two values */
   
   perspective-origin: y-position x-position; /* If both values are keywords ,  First y after x It's also allowed */
   

->> Reference link

MDN Chinese document https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

MDN English document https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform-origin Property introduction https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

CSS-Tricks https://css-tricks.com/almanac/properties/t/transform/

Quackit https://www.quackit.com/css/css3/properties/css_transform-box.cfm

Zhang Xin Xu - Matrix matrix https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix- matrix /

Zhang Xin Xu - CSS Animation https://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

->> Version History

The current version is V2.1, The next edition is expected to add several flight.Playground(hover QuickView) For interactive understanding

See Github(@flightmakers)

2021.8.17 The Nuggets released V0.1

2021.8.18 Complete the content . Release V1.0, Added two links

2021.8.24 In the morning It complements many other Transform attribute , Release V2

2021.8.24 At noon, Two more perspective properties have been added , Release V2.1