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倍*/}

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°*/}

also has two sub-methods, translateX, translateY;

Made a simple example, using rotate;

Summary:

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