current position:Home>CSS transform Complete Guide (Second Edition) flight.archives 007

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

2021-08-29 05:46:24 designer& creator

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

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

copyright notice
author[designer&amp; creator],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210829054622584N.html

Random recommended