CSS3之2D转换相关基本知识

2D转换之位移

二维坐标系：

移动位置的方法有 ： 定位， margin

1.语法

transform: translate(x,y); 或者分开写
transform: translateX(n) ; //在x 轴方向上变动
transform: translateY (n) ;  // 在y 轴上 变动

2.重点
定义2D转换中的移动,沿着x和Y轴移动元素

translate最大的优点:不会影响到其他元素的位置（会用于鼠标经过时图片发生上浮的视觉效果）
●translate中的百分比单位是==相对于自身元素(宽度或高度）==的 translate:(50%,50%);
●对行内标签没有效果

用其实现盒子水平，垂直居中

2D转换之旋转

css用旋转书写三角形

2D旋转中心点

2D转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法

transform-origin: x y;

2.重点
●注意后面的参数x和y用空格隔开
●x y默认转换的中心点是元素的中心点(50% 50%)
●还可以给x y设置像素或者方位名词(top bottom left right center)

旋转案例

2D转换之缩放

1.语法

transform:scale(x,y);

2.注意
● 注意其中的x和y用逗号分隔
● transform:scale(1,1) :宽和高都放大-倍，相对于没有放大
● transform:scale(2.2) : 宽和高都放大了2倍
● transform:scale(2) :只写一个参数.第二个参数则和第一个参数- -样,相当于scale(2.2)
● transformscale(0.5,0.5) :缩小
● sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D转换综合写法

注意:
1.同时使用多个转换.其格式为:

transform translate() rotate() scale()…等.

2.其顺序会影转换的效果。( 先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前