CSS3 转换(transform)

二维坐标 2D转换是改变标签在二维平面上的位置和形状的一种技术,设置属性都是根据自身原本的位置再去向X轴(正数往右平移，负数，往左平移)和Y轴(正数像下平移,负数往上平移)进行改变, 如图所示;

转换(transform)主要分为四种样式, 它可以帮助我们实现元素的移动、旋转、缩放及一些小动画效果;

一、 2D转换之移动translate:

语法:

transform: translate(x,y); x和y两个值 中间用逗号隔开; 根据当前的位置为标点再像X轴Y轴进行移动
translateX(n); translateY(n); 也可以单独移动X轴和Y轴,但是后面最后的X或Y需要大写;

注意点:

如果参数里的单位是%,那么移动的距离是根据盒子自身的宽度或高度来对比的如:高为200px的盒子translateY(50%);的话, 那么他们只会根据自身高度的50%向下移动100px;
定义转换中的移动: 根据自身的位置沿着Y轴和X轴进行移动元素;
translate最大的优点:不会影响其他元素的位置;
该属性对行内标签没有效果;

旋转是指让元素在2维平面内顺时针或者逆时针旋转;

语法:

 transform:rotate(旋转度数);

注意点:

旋转 transform-origin;

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

语法:

transform-origin: (X Y); // 设置旋转的中心点

注意点:

缩放,顾名思义, 可以放大或者缩小. 只要给元素添加了这个属性就可以可以做到;

 div{ 
     width: 200px;
     height: 200px;
     background-color: red;  
     ansform: scale(1,2);  //当前高*2  height=400px;
     }

注意点:

1.里面的参数是不跟单位的, 并且使用逗号分隔;

2.里面的参数是倍数,填1的话不会发生变化(1*1=1);