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

2021-08-29 05:46:24

## 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

1. `perspective(l)`

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

#### Rotate( rotate ) Correlation function

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

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

2. `rotate(a)`

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

3. `rotateX(a)`

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

4. `rotateY(a)`

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

5. `rotateZ(a)`

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

#### Scale( The zoom ) Correlation function

1. `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 .

2. `scale(sx, [sy])`

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

3. `scaleX(s)`

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

4. `scaleY(s)`

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

5. `scaleZ(s)`

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

#### Skew( tilt ) Correlation function

1. `skew(ax, [ay])`

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

2. `skewX(a)`

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

3. `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 .

1. `translate3d(tx, ty, tz)`

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

2. `translate(tx, [ty])`

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

3. `translateX(t)`

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

4. `translateY(t)`

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

5. `translateZ(t)`

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

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 */
``````

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

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