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
-
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 thismatrix
Functionally implementedHowever, 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 onwebgl
Realized JS library , Such asthree.js
About
matrix matrix
For details, see https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix- matrix / -
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
-
perspective(l)
l
:<length>
, Represents the perspective depth , Takes effect when the value is positive
Rotate( rotate ) Correlation function
-
rotate3d(x, y, z, a)
x
,y
,z
,a
:<angle>
, Abscissa , Ordinate , Z coordinate and Clockwise rotation angle -
rotate(a)
a
:<angle>
, Represents the angle of clockwise rotation -
rotateX(a)
a
:<angle>
, Represents the angle of abscissa rotation -
rotateY(a)
a
:<angle>
, Represents the rotation angle of the ordinate -
rotateZ(a)
a
:<angle>
, Express Z The angle of coordinate rotation
Scale( The zoom ) Correlation function
-
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 .
-
scale(sx, [sy])
sx
,sy
( Optional ):<percentage>
, stay X Axis , Y Scale size on axis . -
scaleX(s)
s
:<percentage>
, stay X Scale size on axis . -
scaleY(s)
s
:<percentage>
, stay Y Scale size on axis . -
scaleZ(s)
s
:<percentage>
, stay Z Scale size on axis .
Skew( tilt ) Correlation function
-
skew(ax, [ay])
ax
,ay
( Optional ):<angle>
, Element along X Axis and Y Angle of shaft inclination -
skewX(a)
a
:<angle>
, Element along X Angle of shaft inclination -
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 .
-
translate3d(tx, ty, tz)
tx
,ty
,tz
:<length>
, Element along X Axis ,Y Axis and Z Distance of axis translation . -
translate(tx, [ty])
tx
,ty
( Optional ):<length>
, Element along X Axis and Y Distance of axis translation . -
translateX(t)
t
:<length>
, Element along X Distance of axis translation . -
translateY(t)
t
:<length>
, Element along Y Distance of axis translation . -
translateZ(t)
t
:<length>
, Element along Z Distance of axis translation .
Tag/ Transform Introduction to related properties
-
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 )*/
-
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 */
-
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 */
-
perspective
Can be an independent CSS attribute , Specify the perspective depth , Consistent with the method used as a function .
-
perspective-origin
It specifies 3d The observer's position , The value is
perspective
The vanishing point of the attributeValue 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-originCSS-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