Notes on transform several attribute values in CSS3

　　transform ( variant) It's CSS3 . The attributes of the elements in thetransform mainly include rotation rotate, twisting skew, scaling scale , and moving translate Matrix variants

Basic usage can refer to article CSS3 Transform.

Methods used in conjunction with transition reference CSS animation animation and Transition

This document notes several points of note:

1, Transform:rotate (30deg), 2D rotation, positive value is clockwise rotation, negative value is counterclockwise rotation, the default rotation base point is the center, can also be transform-origin (x, y) to change the base point.

　　　　　　　　

2, Transform:skew (30deg,10deg), note that the x and y axes here are exactly the opposite of the XY axis of the coordinate system we normally consider, and the x-axis positive value is counterclockwise the y-axis positive value is deformed clockwise. the base point defaults to the center. There are also skewx, Skewy, respectively, used to set the distortion in a single direction. You can change the base point by Transform-origin (x, y)

　　　　　　　　　　

Sketch:

3, Transform:scale (2,1.5), indicates that the horizontal (x-axis) is scaled twice times, and is scaled 1.5 times times in the vertical direction (y-axis). The basic default is the center point. The X and Y axes here refer to X, y axes like coordinate systems, and X for Transform:skew

The y-axis is different. In addition, ScaleX (<number>), ScaleY (<number>) are used to set the scaling in a single direction respectively. You can change the base point by Transform-origin (x, y).

　　　　　　

4, Transform:translate (100px,20px), means moving in the horizontal direction of 100px, in the vertical direction of moving 20px, better understanding, but also have Translatex, Translatey values are respectively set in a single direction of displacement, You can change the base point by Transform-origin (x, y).

　　　　　　

Notes on transform several attribute values in CSS3