css3 新特性（translate 移动，rotate 旋转 ， scale 缩放）

标签：缩放   css3   属性   元素   单位   enter   -o   语法   而且   

1.transform（转换）可以实现元素的位移，旋转，缩放等效果（可以简单理解为变形）

　移动：translate            旋转：rotate          缩放：scale

2. 2D 转换之移动 translate

　可以改变元素在页面中的位置，类似定位。

　语法：

　　transform：translate(x,y);  或者分开写

　　transform：translateX( n );

　　transform：translateY( n );

　重点：

　　定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

　　translate 最大的优点：不会影响到其他元素的位置　　

　　translate 中的百分比单位是相对自身元素的translate:(50%,50%);

　　对行内标签没有效果

3. 2D 转换之旋转 rotate

　2D 转换指的是让元素在 2维平面内顺时针或者逆时针旋转。

　语法：

　　transform:rotate(度数)　

　重点：

　　rotate 里面跟度数，单位是 deg 比如 rotate(45deg)

　　角度为正时，顺时针，负时，为逆时针

　　默认旋转的中心点是元素的中心点

4. 2D转换中心点 transform-origin

　可以设置元素转换的中心点

　语法：

　　transform-origin:x   y;

　重点：

　　注意后面的参数 x 和 y 用空格隔开

　　x  y 默认转换的中心点是元素的中心点 （50%   50%）

　　还可以给 x y 设置 像素 或者 方位名词（top   bottom  left  right  center）

5. 2D 转换之缩放 scale 

　缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性，就能控制它放大还是缩小。

　语法：

　　transform：scale(x,y)；

　重点：

　　其中的 x 和 y 用逗号分隔

　　transform:scale(1,1)：宽和高都放大一倍，相对于没有放大

　　transform:scale(2,2)：宽和高都放大了2倍

　　transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

　　transform:scale(0.5,0.5)：缩小

　　scale 缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

css3 新特性（translate 移动，rotate 旋转 ， scale 缩放）

标签：缩放   css3   属性   元素   单位   enter   -o   语法   而且   

原文地址：https://www.cnblogs.com/qtbb/p/11748190.html