今天是就业班开班的第一天，上完了一天的课，做点总结。

什么叫做移动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. 默认 旋转的中心点 元素的中心

      1. 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>

    <!--

      1 定好标签结构

      2 子元素先重叠在一起  定位

      3 为了更好观察每一个面 分别 加上颜色

      4 要使用 3d移动 + 3d 旋转 来构建6个面 重点

        1 前面 和后面 关键是控制 物体的z轴上的距离

      5 为了要看到完整的一个立方体

        1 大盒子加一个旋转效果

            transform:rotate3d(1,1,1,30deg);

        2 给每一个面 加一点透明度

      6 给box加一个新属性，开启容器3d环境 属性

        1 浏览器 默认 没有开启3d效果 把每一个div当成是一个平面来对待

          transform-style: preserve-3d;

     -->

    <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

移动开发day1_过渡_2d转换_3d立体的更多相关文章

  1. 花了一年时间开发的TTF2FNT字库转换软件

    TTF(True Type Font)字库是微软定义的基于windows的标准字库格式.但其由于专利保护以及无法跨平台导致TTF字库在实际应用中无法有效使用. 为此我开发了TTF2FNT字库转换软件, ...

  2. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  3. weblogic 生产模式和开发模式的互相转换

    weblogic 生产模式和开发模式的互相转换 学习了:http://blog.csdn.net/qew110123/article/details/45845935 weblogic10.3生产模式 ...

  4. CSS3新特性—过渡、转换

    过渡 转换 2D转换 2D转换包括四个方面:位移,缩放,旋转,倾斜 位移[让元素移动位置] transform: translate(100px,100px); 备注: 1. 如果只设置一个值,那么代 ...

  5. 开发板A/D转换原理

    A/D转换器(Analog-to-Digital Converter)又叫模/数转换器,即使将模拟信(电压或是电流的形式)转换成数字信号.这种数字信号可让仪表,计算机外设接口或是微处理机来加以操作或是 ...

  6. css（动画，过渡，转换）

    css3动画 @keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性 以百分比来规定改变发生的时间,或者通过关键词"from"和" ...

  7. CSS3_过渡_2D 变换_瓶体旋转_动态时钟

    1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡, 在鼠标点击,鼠标滑过或对属性改变中触发,并圆滑的改变 CSS 的属性值 简写属性: #box { width: 300 ...

  8. python 全栈开发，Day7(元组转换,列表以及字典的坑,集合,关系测试,深浅copy,编码补充)

    一.元组转换 数字 tu = (1) tu1 = (1,) print(tu,type(tu)) print(tu1,type(tu1)) 执行输出: 1 <class 'int'>(1, ...

  9. Android数组和开发List之间的转换

    1.List转换到一个数组.(这里List它是实体是ArrayList) 转让ArrayList的toArray方法. toArray public <T> T[] toArray(T[] ...

随机推荐

  1. MySQL 基础知识梳理学习（五）----半同步复制

    1.半同步复制的特征 (1)从库会在连接到主库时告诉主库,它是不是配置了半同步. (2)如果半同步复制在主库端是开启了的,并且至少有一个半同步复制的从节点,那么此时主库的事务线程在提交时会被阻塞并等待 ...

  2. PO,VO,TO,BO,DAO,POJO的解释

    java的(PO,VO,TO,BO,DAO,POJO)解释  O/R Mapping 是 Object Relational Mapping(对象关系映射)的缩写.通俗点讲,就是将对象与关系数据库绑定 ...

  3. 各种raid对比

    级别 最少单元 特征 冗余 性能 空间利用率 综合评价 RAID0 1 分片分散存入 否 读写2倍 100% 分散存储,任何一块坏掉数据则不完整 RAID1 2 相同数据存入2个磁盘 是 写不变,读快 ...

  4. centos7新增硬盘

    centos7新增硬盘 步骤:分区---格式化---挂载(配置开机自动挂载) 1.分区 fdisk -l 查看硬盘信息确认新硬盘的名称(以/dev/sdb为例) fdisk /dev/sdb  管理硬 ...

  5. HTML+Css让网页自动适应电脑手机屏幕

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  6. RocketMQ4.3.X关于设置useEpollNativeSelector = true报错问题

    前一阵子刚整理完RocketMQ4.3.x版本的相关配置的工作,接下来就来测试一下改变参数会带来什么好的结果 首先我就选中了useEpollNativeSelector 这个参数 默认这个参数是 fa ...

  7. .NET和PHP程序员如何通过技术快速变现

    刚开始写博客不足之处望大家多多指点,少一些质疑多一些帮助,我们就能成为朋友. 上一篇:<.NET程序员我是如何通过一个产品在2年内买车买房>有很多同为程序员的小伙伴们给我留言,从整体的留言 ...

  8. 8年，从2D到3D，我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. “理了么”软件特点NABCD个人分析

    在这里我就主要对此软件的‘A’(做法)和‘B’(好处)两方面进行分析. “A”:我们的软件为顾客和商家分别提供一种账户,分别登陆后会显示不同的界面. 1.用户界面:拥有“理发店”.“订单“.”和“我的 ...

  10. 企业出口退税申报系统的Sqlite数据库破解及读写

    QQ:564955427 原始出处:https://www.cnblogs.com/Charltsing/p/TSSB.html 最近一些朋友反映龙图的企业出口退税申报系统的Sqlite数据库改变了加 ...