I. Definition: A transformation is an effect that causes an element to change shape. It is also called deformation . divided into 2D and 3D conversion. 2D conversions can only change on the x.y axis, such as: Pan (move). Tilt (skew). Rotation (rotate). Zoom (scale) .  3D conversion allows for space conversion. Two. Properties: 1.transform Properties: Apply 2D or 3D conversion; value: None (the default value does not make any conversions). Fransform-function (represents one or more conversion functions: pan rotation, tilt. Zoom) notation: (1) Transform:rotate (30deg) angle is positive when rotated clockwise, negative values rotate counterclockwise . (2) Transform:scale (x, y) x, y, 0~1 when the value is reduced, Greater than 1 o'clock magnification or scalex () on the x-axis scaling ScaleY () the y-axis scaling can be negative when the direction is reversed . (3). Transform:skew (45deg) tilt to the left when the angle is positive When the angle is negative, tilt to the right or SKEWXAA () and Skewy () (4). translate (x, y) panning values, percentages, or negatives can also use a one-way displacement function: TranslateX (x), Translatey (y) 2.transform-origin properties (1). The origin of the default deformation is the center point of our element . notation: transform-origin:x,y; keyword:right,top,bottom,top;%: 3. Transform-style Properties (1) Function: Make the page 2d/3d display; (2) Flat: default, Planar 2d;   (3). Preserve-3d: Elements are displayed in 3D space; Note: You must set; (4) in the parent class element. If an element is set to a Transform-stylethe value isFlat , all child elements of the element are flattened to the element's 2Drendered in a plane. AlongXAxis or Yrotation of the axis direction causes the element to be in a positive or negative ZThe child element of the axis position is displayed on the plane of the element, not before or after it. If an element is set to a Transform-stylethe value ispreserve-3d , which indicates that no flattening operation is performed, all of his child elements are located in the 3Din Space4.3DConversion(1)Perspective attribute (Chinese meaning: Perspective, Perspective)Perspective property to set the distance from the lens to the element plane. All elements are placed in the z=0on the plane. LikePerspective (300px)indicates that the position of the lens from the element surface is -pixels. (2)Features:a , defined for the element Perspective property, its child elements get a perspective instead of the element itselfb , affecting only 3D converting elements Note: The default is 3DThe effect is not obvious? This is because the lens is too far from the plane, so the rotation effect is not obvious. Give it a try Perspectiveproperty. Setperspect=400px . (3)3D displacement mainly includesTranslatez (z)Translate3d (x, Y, z) explanation: For no Rotatexas wellRotatey the elements,TranslatezThe function is to let the elements in their eyes or near or far (combined with the diagram on the blackboard);(4)3D rotation mainly includesRotatex (deg)Rotatey (deg)Rotatez (deg)Rotate3d (x,y,z,deg)(5)3D scaling mainly includesScalez (z)Scale3d (x, Y, z)
CSS (Advanced) "Convert" notes
