web 前端

1、2d坐标轴

• 2d坐标轴（图示）

• x轴：水平，向右为正，向左为负

• y轴：垂直，向下为正，向上为负

2、2d位移

 transform: translate()平移
​
- transform: translate(x,y) 沿着x轴和y轴移动
- transform: translateX(x) 沿着x轴移动
- transform: translateY(y) 沿着y轴移动
​
取值:
​
- px
- 百分比（强调相对于元素本身计算）
- 水平，向右为正，向左为负
- 垂直，向下为正，向上为负
- x与y之间用逗号隔开
​
> 水平向右为正值，垂直方向向下正值
​
/* 沿着水平方向位移 */
当为一个值的时候，只沿着水平方向位移
transform: translate(50px);
   注意:元素位移之后，原来的位置还在
​

3、2d缩放

 语法：
     transform: scale(x,y);
     x:宽度  
     y:高度
     x，y之间以逗号隔开
​
     1： 默认值 不放大也不缩小
     0：缩小为0 ，没有了
     0-1：缩小
     >1 :放大
​
       如果只写一个值，宽高都进行缩放
      transform: scale(1.2);
​
      元素缩放为0 后，原来的位置还在
​
      当为负值的时候,先翻转(180deg)，后缩放

4、2d旋转

* 语法
​
* transform：rotate(deg);沿着中心点旋转，默认值
​
* transform: rotateX(deg);沿着X轴旋转
* transform: rotateY(deg);沿着Y轴旋转
​
•        单位：deg
•        当角度值为正数时，元素沿着顺时针方向旋转
•        当角度值为负数时，元素沿着逆时针方向旋转

5、创建网页3d效果

- perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素
​
一般取值：800px-1000px
perspective：800px 就是人离屏幕800px 的地方观看这个div元素。
当translateZ的大小临近与800px时图片离我们越来越近了
当它大于800px时，这个图片就消失了
​
反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。

6、设置元素的基点位置

* transform-origin: 水平方向 垂直方向;
​
* 设置元素的基点位置，设置围绕哪个点进行变化
​
* 取值
​
    px
​
   关键字
​
       水平：left center right
       垂直：top  center bottom
​
- 说明：
  两个空格隔开的值，分别表示x,y轴的原点
  一个值时，另一个值默认center
- 可为负数
​
> 必须与transform属性配合使用
>
> 位移不能用 

7、旋转，位移，缩放，的复合写法

复合写法  旋转位移缩放 空格隔开
    .wrap:hover .box1 {
            transform: rotate(135deg);
            transform: translate(50px);
            transform: scale(1.5);
            transform: translate(100px) rotate(120deg) scale(1.5);
        }