移动开发day1_过渡_2d转换_3d立体

移动开发day1_过渡_2d转换_3d立体
今天是就业班开班的第一天，上完了一天的课，做点总结。

什么叫做移动web

专门在手机或者平板电脑浏览器网页

为什么要学习移动web

工资高

1. 人拥有的手机数大于电脑的个数

2. 微信

　　1. 微信公众号
　　2. 微信小程序
　　3. 移动web基础知识可以用在微信里面

移动web阶段主要讲解什么知识
1. 移动端常见的布局的方式 (pc布局版心 )
2. 移动端手机屏幕很多也是不一样，
3. 长度单位要补充！！！ px 百分比
4. 总结
  1. 主流的移动布局的解决方案
  2. 对常规页面布局心里会知道如何实现，不同方式之间的区别有点缺点。。。
过渡

语法
1. transition-property 要执行过渡的属性名
  
  如width，height transition-property: width; 写all代表全部
2. transition-duration 执行过渡的持续的时间
  
  设置过渡的持续时间如 transition-duration:10s
3. transition-timing-function 速度曲线 (可省略)
  
  设置变化的速度曲线如匀速等
  - linear：匀速
  - ease：慢-快-慢默认值
  - ease-in：慢-快。
  - ease-out：快-慢。
  - ease-in-out：慢-快-慢。
  - steps 设置跳跃性的动画
    
    steps (n,start) 在该段时间的开始触发
    
    steps(n,end) 在该段时间的末端出发
4. transition-delay 延迟时间（可省略）
  
  设置产生过渡时的延迟时间如 transition-delay: 10s;
复合写法

可以使用复合写法

/* 过渡的属性为width 持续3s 匀速延迟0s */
transition: width 3s linear 0s;

2d转换

可以改变元素在二维平面上的位置和形状的一种技术
1. 移动平移 translate
2. 旋转 rotate
3. 缩放 scale
4. 倾斜。。。了解因为布局不用它。。 skew。。
移动translate

能够改变元素的位置的技术有哪一些
1. 定位
2. margin
3. translate
布局的时候如何选择以上的3个属性进行使用
1. 大的布局设定优先用定位
2. 小微调再根据情况去选择
  1. margin 会挤压相邻的元素
  2. 移动translate 不会挤压相邻元素，有点类似定位覆盖相邻元素。
3. 行内元素加转换属性无效
代码
```
div{
    transform:translate(0px,0px) ;
}
```
旋转 rotate

让元素进行旋转
1. 旋转的正方向是顺时针
2. 旋转的中心点是被旋转元素的中心点
代码
```
div{
    transform:rotate(30deg);
}
```
缩放 scale

缩放一个div 宽度和高度而已

上午的过渡和转换的总结

过渡 transition
1. 过渡有4个参数可以设置
  1. 要过渡的属性名 transition-property
  2. 要过渡的持续的时间 transition-duration
  3. 速度曲线 transition-timgin-function
  4. 延迟时间 transition-delay
2d-转换

改变元素二维平面上的位置和形状的技术
1. 移动
  1. 移动平移 translate(水平方向的平移，垂直方向上的平移)
  2. 百分比单位是对于自身的宽度和高度，区别于定位和 margin
  3. 移动类似绝对定位，不会挤压相邻的元素，覆盖
2. 旋转 rotate
  1. 单位是角度 deg
  2. 旋转正方向是顺时针
  3. 默认旋转的中心点元素的中心
    
    transform-origin:0 0 ；
3. 缩放 scale
  1. 缩放是元素的宽度和高度
  2. 单位没有单位就是数值而已。
4. 行内元素加转换没有效果
5. 移动旋转缩放一起使用
```
div{
  transform: translateX(500px) rotate(90deg) scale(2,2);
}
```
3d立体空间

有三条坐标轴
1. x轴，方向水平从左到右
2. y轴，垂直上从到下
3. z轴从电脑屏幕里面指向屏幕的外面！！
3d转换

可以改变元素在 3d空间内的位置和形状一种技术！！
1. 3d 移动
  1. 利用眼睛 + vs code 代码提示来使用即可
2. 3d 旋转
  1. 看着代码能想象到如何旋转
  2. 看着案例能知道代码是怎么写
3. 3d 缩放
3d旋转

旋转方向判定

让物体沿着 x轴旋转的时候，

左手准则
1. 伸出左手
2. 左手手拇指指向要旋转的轴的正方向 x轴的正方向
3. 左手的其他手指弯曲的方向就是物体旋转的方向
立方体的实现步骤
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .box{
        width: 400px;
        height: 400px;
        /* border: 1px solid #000; */
        margin: 100px auto;
        position: relative;

        /* transform: rotateX(30deg); */
        transform:rotate3d(1,1,1,30deg);

        /* box开启了3d容器环境  */
        transform-style: preserve-3d;
      }
      .box>div{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .8;
      }
      .front{
        background-color: firebrick;
        /* 正方向 200px z轴 */
        transform: translateZ(200px);
      }
      .back{
        background-color: blue;
        /* 反方向 -200px z轴 */
        transform: translateZ(-200px);
      }
      .left{
        background-color: lawngreen;
        /* x轴负方向移动 200px 沿y轴旋转90度 */
        transform: translateX(-200px)  rotateY(90deg);
      }
      .right{
        background-color: rosybrown;
        transform: translateX(200px)  rotateY(90deg);
      }
      
      .up{
        background-color: peru;
        /* y轴负方向 移动200px 沿着x轴旋转90deg */
        transform: translateY(-200px) rotateX(90deg);
      }
      .down{
        background-color: darkmagenta;
        transform: translateY(200px) rotateX(90deg);
      }
    </style>
  </head>
  <body>

    
    <div class="box">
      <div class="front"></div>
      <div class="back"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="up"></div>
      <div class="down"></div>
    </div>
  </body>
</html>
```
1. 主流的网站天猫淘宝还是用得很少3d效果。
2. 3d效果比较多，对浏览器性能要求比较高
3. 3d效果虚拟现实真实场地体验。。 3d效果。。。
4. 剩下一些属性视距视距圆点容器内开启3d环境都是了解。
5. canvas
相关阅读:
思考的容器：结构
 思维的结构-结构是思维的组织形式-系统思维
 分层抽象复杂认知
 NoSQL 简介
 什么是数据库ACID?
sqlite3 多线程和锁，优化插入速度及性能优化
 Architecture of SQLite
关系模型我的理解
 科学理论--抽象
 认识的三个层次
原文地址：https://www.cnblogs.com/replaceroot/p/10646602.html

移动开发day1_过渡_2d转换_3d立体

什么叫做移动web

为什么要学习移动web

移动web阶段主要讲解什么知识

过渡

语法

复合写法

2d转换

移动translate

布局的时候 如何选择以上的3个属性进行使用

代码

旋转 rotate

代码

缩放 scale

上午的过渡和转换的总结

过渡 transition

2d-转换

3d立体空间

3d转换

3d旋转

旋转方向判定

左手准则

立方体的实现步骤

布局的时候如何选择以上的3个属性进行使用