前端-html，css，transform变形

transform变形

1.什么是变形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnaEKgwq-1637198238631)(C:\Users\EDZ\Desktop\HTML&CSS基础\day15\课件\image\14-1.png)]

2.2D变换transform

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

2.1 2维坐标系

2维坐标系其实就是指布局的时候的坐标系

2.2 2D移动 translate

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

使用2d移动的步骤：

1.给元素添加转换属性transform

2，属性值为translate（x，y）

  div{
    transform: translate(50px,50px);
  }

小结

1. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
2. translate类似定位，不会影响到其他元素的位置
3. 对行内标签没有效果

2.3 2D旋转rotate

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

使用步骤：

1. 给元素添加转换属性 transform

2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

   div{
         transform: rotate(0deg);
   }
   

2d旋转有以下特点

1. 角度为正时 顺时针 负时 为逆时针
2. 默认旋转的中心点是元素的中心点

旋转中心transform-origin 了解

该属性可以修改元素旋转的时候的中心点

1. transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同
3. transform-origin:50px 50px; 距离左上角 50px 50px 的位置
4. transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

2.4 缩放 scale

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

步骤：

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

2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)

   div{
       transform:scale(2,3);
   }
   

小结

1. transform:scale(1,1) 放大一倍 相对于没有放大
2. transform:scale(2,2) 宽和高都放大了2倍
3. transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
4. transform:scale(0.5,0.5) 缩小
5. transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

3.3D转换

3d转换是改变标签在3坐标系上的位置和形状的一种技术

3维坐标系

3维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

• x轴 水平向右
• y轴 垂直向下
• z轴 垂直屏幕 由屏幕里面指向屏幕的外面

3.1 移动 translate3D

3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向

语法：

1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

注意:

因为z轴是垂直屏幕，由里指向外面，所以 默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的 视距 属性设置

视距 perspective 了解

perspective 就是用来设置 人 和 物体 的距离

如 我们想要看到 物体 在z轴上的移动 的 远大近小 效果时

1. 设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
2. 设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素 perspertive:1000px
3. 动态改变物体的 translateZ 即可观察效果

    /* 父元素 */
    body {
      /* 视距 */
      perspective: 1000px;
    }

    /* 目标 */
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* z轴的移动 */
      transform: translateZ(0px);
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3VkuPP4e-1637198238639)(C:\Users\EDZ\Desktop\HTML&CSS基础\day15\课件\image\5.gif)]

小结

1. translateZ的值和perspective都要大于0 否则容易出现兼容性问题

3.4 3d旋转 rotate3d

3d旋转指可以让元素在3维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转 对于元素旋转的方向的判断 我们需要先学习一个左手准则

左手准则

比如要判断某元素沿着x轴是怎么旋转的

1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

例子:

    /* 沿着x轴正方向旋转90度 deg为单位 */
      transform: rotateX(90deg);

可以通过自己的代码测试 让物体沿着y轴 z轴旋转，加深了解。

语法

1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度 了解即可

视距原点 perspective-origin 了解

视距可以设置 人 和 物体 之间的距离 也就是z轴方向的距离

而 视距原点 可以设置 人 站在x轴和y轴的位置。

1. 视距原点和视距一样，也是设置给要观察元素的父元素上
2. perspective-origin:center center; 默认值是元素的中心点
3. perspective-origin:10px； 指定了一个参数的时候，第二个参数默认为center 也就是50%；
4. perspective-origin:10% %； 百分比都是相对于自身的宽度和高度

转换样式 transform-style 了解

结合3d立方体案例理解，控制子元素是否开启3维立体环境

• transform-style: flat; 平面模式 - 不开启3维立体环境
• transform-style: preserve-3d; 3维立体环境

3D转换总结

1. 百分比单位都是相对于自身
   身的宽度和高度

转换样式 transform-style 了解

结合3d立方体案例理解，控制子元素是否开启3维立体环境

• transform-style: flat; 平面模式 - 不开启3维立体环境
• transform-style: preserve-3d; 3维立体环境

3D转换总结

1. 百分比单位都是相对于自身
2. 视距、视距原点、转换样式 这三个属性都是给父元素添加的