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. 当我们同时有位移和其他属性的时候 
  
  
  
  
  
  
  
  ，记得要将位移放到最前面                。