2d变成3d（2D 转换）

1.转换

转换（transform）是CSS3中具有颠覆性的特征之一 
  
  
  
  
  
  
 ，可以实现元素的位移              、旋转 
  
 
  
 
  
 
  
 
  
 
  
 
  
、缩放等效果              。

转换（transform）可以简单理解为变形 
  
 
  
 
  
 
  
 
  
 
  
 
  
。

移动：translate

旋转：rotate

缩放：scale

1.1 二维坐标系

2D转换是改变在二维平面上的位置和形状的一种技术













。

1.2 2D 转换之移动 translate

2D移动是2D转换里面的一种功能
  
  
  
  
  
  
  ，可以改变元素在页面中的位置
 


 


 


 


 


 


 

，类似定位 
  
  
  
  
  
  
 。

语法

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

transform: translateX(n);

transform: translateY(n);

重点

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

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

 


 


 


 


 


 


 
。

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

（4）对行内标签没有效果 
 
 
 
 
 
 
。

1.3 2D转换之旋转 rotate

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

语法

transform: rotate(度数)

重点

（1）rotate里面跟度数
   
   
   
   
   
   
   ，单位是deg
 

 

 

 

 

 

 
。

（2）角度为正时
 

 

 

 

 

 

 
，顺时针 

 

 

 

 

 

 

，负时              ，为逆时针
 

 

 

 

 

 

 
。

（3）默认旋转的中心点是元素的中心点              。

1.4 2D转换中心点 transform-origin

设置转换点为中心点 

 
 

 
 

 
 

 
 

 
 

 
 

 
。

语法

transform-origin: x y;

重点

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













。

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

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

1.5 2D转换之缩放scale

缩放

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，顾名思义













，可以放大和缩小




















。只要给元素添加上了这个属性就能控制它放大还是缩小              。

语法

transform: scale(x,y);

注意

（1）注意其中的x和y用逗号分隔 
  
 
  
 
  
 
  
 
  
 
  
 
  
。

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













。

（3）transform: scale(2,2)：宽和高都放大两倍 
  
  
  
  
  
  
 。

（4）transform: scale(2)：只写一个参数
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，第二个参数则和第一个参数一样




















，相当于scale(2,2) 
  
  
  
  
  
  
 。

（5）transform: scale(0.5,0.5)：缩小

 


 


 


 


 


 


 
。

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

1.6 2D转换综合写法

注意：

1. 同时使用多个转换













，其格式为：transform: translate()rotate()scale()…等 
   
   
   
   
   
   
  。

2. 其顺序会影响转换效果
 

 

 

 

 

 

 
。（先选转会改变坐标轴方向）
 

 

 

 

 

 

 
。

3. 当我们同时有位移和其他属性的时候 
  
  
  
  
  
  
 ，记得要将位移放到最前面              。