18-2D转换

2D转换

基本概念

• css3提供了transform属性来处理盒子（html标签）的转换，包含位移、旋转、缩放、倾斜等转换。
• 2d转换一般会和过渡transition配合使用。
• 特点：转换后不会影响其他元素
• 注意：2d转换针对行内元素没有效果，针对块级元素和行内块级元素才有效

位移 translate(x轴移动量，Y轴移动量);

• 通过translate来设置盒子的位移

• 语法：

  基本用法
  tansform : translate(x轴移动量，Y轴移动量);
  tansform : translate(x轴移动量);
  tansform : translateX();
  tansform : translateY();
  例子：
  transform : translate(100px,50px);  //X轴向右移动100px，Y轴向下移动50px
  

  • 盒子以原来的位置为起点，进行移动
  • 可以设置负值

旋转rotate(旋转角度)；

• 通过rotate来设置盒子的2d旋转

• 语法：

  语法：
  transform : rotate(旋转角度)；    
  例子：
  transform :  rotate(30deg);  	//盒子以自身中心点为基点，顺时针沿轴旋转30度
  
  x轴旋转：
  transform :  rotateX(30deg);    //盒子以自身中心点为基点，顺时针沿x轴旋转30度
  
  Y轴旋转：
  transform :  rotateY(30deg); 	 //盒子以自身中心点为基点，顺时针沿y轴旋转
  

缩放scale（宽度的倍数，高度的倍数）;

• 通过scale可以控制盒子的缩放

• 语法：

  transform：scale（宽度的倍数，高度的倍数）;
  transform：scale（倍数）;	//等比缩放
  
  例子：
  transform：scale（1.1，1.3）;
  

  • 取值为数字，1代表1倍，和原尺寸一样，小数会缩小，大于1的数会放大
  • 默认参考中心点

倾斜skew(角度);

• 通过skew属性进行盒子沿着x轴或者y轴进行倾斜转换

• 语法：

  transform : skew(角度); 
  
  例子：
  transform : skew(45deg);	//沿着x轴进行倾斜45deg
  transform : skewX(45deg);	//沿着x轴进行倾斜45deg
  transform : skewY(45deg);	//沿着y轴进行倾斜45deg
  

  • 角度越大，越接近x轴或者y轴，当角度为90deg的倍数时，会x轴或者y轴平行，消失不见。

转换的基点

• 基点就是2D转换时参考的点，通过transform-origin来控制参考点

• 语法：

  transform-origin:x y;
  x代表x轴上的取值，y代表y轴上的取值
  

  • 单词：left right top bottom center 默认是center center，默认盒子是按照中心点进行转换
  • 像素
  • 百分比

• 注意：

  • 转换的基点需要在转换之前确定，否则浏览器解析会出问题
  • 转换基点，针对位移是没有影响的，因为位移是参考原来的位置进行移动
  • 针对于缩放和旋转以及倾斜是有影响的，因为这两个是参考点进行变换，默认参考中心点，改变了基点，效果也会发生变化

2D转换的组合使用

• 概念：多个2D转换组合在一起，每个转换都能作用

• 每种转换之间使用空格隔开

• 注意：旋转会改变x轴和y轴的方向，会影响位移的方向；使用过程中根据需要，确定是先旋转还是先位移

  例子：
  /* 水平移动200px ，并且旋转45deg */
  /*位移  缩放  倾斜  旋转*/
  transform: translateX(200px) rotate(45deg);
  

练习

​ 导航栏-2D

​

    

        关于我们
        产品介绍
        公司介绍
    

照片墙

    

        
 
        
北京
    
    

        
 
        
北京
    
    

        
 
        
北京
    

北京

北京

北京

```