Summary of new features of CSS3 (Transform)_html/css_WEB-ITnose

Overview:

The newly added Transform in CSS3 can change the coordinates of elements in the visual area (this change will not cause the document to be rearranged, only rearranged), as well as the shape, There are also some 3D deformations. Combined with Animation (there will be a link here later), cool animations can be achieved;

Rotate (rotate):

rotate supports one parameter, an angle value 0- 360deg

#demo {   transform:rotate(180deg)  ;/*实现旋转,左上角的东西会在右下角显示*/}

Scale:

scale supports two parameters (x, y). If y is not filled in, Take the value of , scaleY, used to set the scaling of x or y respectively;

skew (skew):

#demo {  transform:scale(1.2);/*放大1.2倍*/  transform:scale(.8);/*缩小为正常的0.8倍*/}

skew supports two parameters (x, y), the parameter type is angle (deg), if If y is not filled in, it defaults to 0 (different from scaling);

If only x or y is set, two sub-methods can be used directly, skewX and skewY;

Translation (translate):

#demo {  transform:skew(45deg);/*文本沿x轴向左倾斜45°*/  transform:skew(0,45deg);/*文本沿y轴向下倾斜45°*/}

translate receives two parameters (x, y) which are the translation distance. If the y value is not filled in, it defaults to 0 and supports all CSS Valid length unit within (using translate to move elements will not trigger reflow, only redrawing);

also has two sub-methods, translateX, translateY;

Made a simple example, using rotate;

Summary:

#demo {  transform:translate(20px,5vh);/*向左移动二十像素,向下移动百分之五的视窗高度*/}

You can do a lot of cool things with Transform, (matrix is ​​skipped, matrix3d ​​did not say ...) Of course, don’t seek death like me

Related reference documents:

MDN’s Transform

w3school’s Transform

W3 Documentation