h5--Seventh Lesson

07-Transformations

Transform: Transform
Transformation:
Rotate (d) rotation, Angle (Supplement 1: Units of angle), subject to < change datum > influence

Scale (x, y) scaling, numeric, representing scale, default 1, < Transform datum > Impact
X: Horizontal Scaling, y: Vertical scale
Y can default, and the first value will represent X, y
Can be split into ScaleX (x)/ScaleY (y)

Translate (x, y) Displacement, Value/percentage with unit
X: Horizontal direction of displacement, Y: displacement in the vertical direction
Can be split into Translatex (x)/Translatey (y)
Note: When a value is a percentage, the reference object is itself rather than the parent element

Skew (x, y) tilt, angle, subject < Transform datum > Impact
X: Horizontal tilt amount, Y: Tilt in vertical direction
Can be split into SKEWX (x)/Skewy (y)

3D transform: (show 3D effect affected by Transform-style, perspective)
Rotate3d (X,Y,Z,D)
X, Y, z are numeric, D is a degree, and the Fit is written in very few words, you can use the following three split properties instead
Rotatex (x)/Rotatey (y)/Rotatez (z)
Translate3d (x, Y, z)
......
Scale3d (x, Y, z)
......

Transform-origin: Transform Datum
Value: Specific coordinate value/percentage/(Left/right/center/top/bottom)
Default Center Center

Transform-style: Specifies whether the scene of the child element of the specified element is in a 3D scene or a planar (projected) scene
Flat: Default plane (projection)
Preserve-3d:3d scene

Perspective: Specifies the distance between the observer and the z=0 plane so that the elements and child elements appear to have a X-ray position effect
Value: Collective with unit value

Perspective-origin: Perspective Datum
Value: Value similar to transform datum

Supplement 1: Units of the angle
DEG: degrees, a round deg
rad: Radians, a round 2πrad≈6.283 rad
Turn: Circle, a circle 1 turn
Grad: Gradient, a circle of grad

h5--Seventh Lesson