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

什么叫做移动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

转载于:https://www.cnblogs.com/replaceroot/p/10646602.html

移动开发day1_过渡_2d转换_3d立体相关推荐

  1. 什么是分镜头剧本？（分镜头剧本是将文字转换成立体视听形象的中间媒介。主要任务是根据解说词和电视文学脚本来设计相应画面，配置音乐音响，把握片子的节奏和风格等。）

    分镜头剧本是将文字转换成立体视听形象的中间媒介.主要任务是根据解说词和电视文学脚本来设计相应画面,配置音乐音响,把握片子的节奏和风格等. 剧本为拍摄电影奠定了基础,但它还不能直接用来进行拍摄,导演还要 ...

  2. CSS3的过渡和转换

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

  3. NX二次开发 点坐标，转换坐标系 UF_CSYS_map_point()

    简介: NX二次开发 点坐标,转换坐标系 UF_CSYS_map_point(). 代码: #include "me.hpp"extern DllExport void ufusr ...

  4. CSS过渡，转换与动画

    目录 过渡(transition) 转换(transform) 什么是转换 二维坐标系 移动(translate) 用translate实现居中 旋转(rotate) 设置旋转中心点 缩放(scale ...

  5. 开发中list常用转换

    开发中list常用转换: 1.将list转换为逗号分隔的字符串 org.apache.commons.lang3.StringUtils.join(applyNameList, ",&quo ...

  6. css3盒模型、过渡、转换介绍

    CSS3中盒模型: 前面CSS中学到的盒子模型给padding.border会撑开盒子的大小,实际大小要通过计算才能得到,为了解决这个问题,CSS3推出了box-sizing属性来解决此问题,当box ...

  7. html 动画过度转换的用法,css（动画，过渡，转换）

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

  8. 移动开发之设计稿转换页面单位尺寸

    在写这篇文章之前,我询问了在唯品会和腾讯的童鞋.以及公司里面前端大神(深哥),对于设计稿切图的详细方法,经过对比验证,得出设计稿转换页面单位尺寸方法步骤.我分别询问下面四个问题: 1. 设计稿的单位是 ...

  9. 09.CSS3渐变、过渡、转换、动画

    CSS3渐变 (1).什么是渐变 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradi ...

最新文章

  1. ASP.NET Session 详解
  2. AngularJS鼠标进入划出事件
  3. c++带成员指针使用
  4. matlab产生ofdm信号,Matlab 完成简单的OFDM 信号的产生与解调程序.pdf
  5. 【Qt】modbus之TCP模式写操作
  6. SnapKit 源码解读（一）：Extensions
  7. 软件测试中英文词汇对照表
  8. 从游击队到正规军(二)：马蜂窝旅游网的IM客户端架构演进和实践总结
  9. 机器之心深度研学社每周干货：2017年第13周
  10. 如何构建健商品期carry组合
  11. 初次软件开发（总结篇 之二）_-Chaz-_新浪博客
  12. HDU 4372 Count the Buildings [第一类斯特林数]
  13. Windows系统下安装VMware Workstation并创建Xubuntu虚拟环境
  14. 仿美团和糯米商家验证版的一个数字校验键盘
  15. Qt高级教程图形视图部分
  16. 《深入探索C++对象模型》第二章 构造函数语义学(The Semantics of Constructors)
  17. 25_类和面向对象的概念
  18. Xp0int2016新生杯CTF-writeup
  19. 全能pdf转换器注册码
  20. pta求阶乘序列前n项和_python在时间序列分析中的简介

热门文章

  1. JAVA八种基本类型
  2. mysql 批量替换 所有表_[收藏]批量替换一个数据库中所有表中所有记录
  3. windows上配置nginx php,Windows下配置Nginx使之支持PHP
  4. matlab暂态信号,MATLAB6在电力暂态波形仿真实现中的应用
  5. java disposable_rx-java – RxJava中的CompositeDisposable是什么
  6. HTML+CSS+JS实现 ❤️3D建筑结构旋转特效❤️
  7. HTML+CSS+JS实现 ❤️高光立体游戏卡片悬停ui特效❤️
  8. linux为已有磁盘扩容 kvm,KVM虚拟磁盘扩容
  9. python自动计算多个教学班的优秀率_第二个月课堂009python之总结(002)
  10. requests由于系统缓冲区空间不足_系统C盘满了空间不足的扩容？