移动开发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. 默认 旋转的中心点 元素的中心

      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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/569569.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java数组初始化

java数组初始化

数组初始化式只能用于声明同时赋值的情况下 如果没有显式赋值&#xff0c;则系统自动赋默认值null Java的对象都是在堆上分配空间 ① String [ ] anew String[ ]{" "," "," " }; ②String [ ] a{" "," "," "…
阅读更多...
原型模式和C++的拷贝构造函数有什么区别

原型模式和C++的拷贝构造函数有什么区别

都是基于个人理解&#xff0c;本文是为了帮助记忆。 相同点&#xff1a;原型模式和拷贝构造函数都是要产生对象的复制品。 不同点&#xff1a;原型模式实现的是一个clone接口&#xff0c;注意是接口&#xff0c;也就是基于多态的clone虚函数。也就是说原型模式能够通过基类指针…
阅读更多...
Taro项目遇到的问题

Taro项目遇到的问题

1. https://taro-ui.aotu.io/#/docs/questions 请在Taro项目根目录找到 config/index.js 文件中的h5项&#xff0c;添加如下&#xff1a; h5: {...esnextModules: [taro-ui] } 2. 原则&#xff1a;少什么就装什么 少了 babel-plugin-transform-decorators-legacy &#xff0c;那…
阅读更多...
JSP编译指令

JSP编译指令

page指令 page指令作用于整个JSP页面&#xff0c;其定义了与页面相关的一些属性&#xff0c;这些属性将被用于和JSP服务器进行通信。 page指令的语法如下&#xff1a; <% page属性1“属性值” 属性2“属性值”……%> 其XML形式为&#xff1a;<jsp:directive.page属性1…
阅读更多...
WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法

WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法

WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法 原文:WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法问题描述 今天发现如果我想在一个TextBlock弄一个右键菜单,并且使用Command绑定,结果发现默认菜单式不可用的. 问题原因…
阅读更多...
Syntax error on tokens, delete these tokens

Syntax error on tokens, delete these tokens

可能出现的错误&#xff1a; 弄错了引号括号之类造成&#xff1b; 在代码前过多空格&#xff0c;特别是对于那些黏贴来的代码&#xff1b;
阅读更多...
1698 -Access denied for user 'root@xxxx'

1698 -Access denied for user 'root@xxxx'

grant all privileges on *.* to userlocalhost Identified by password WITH GRANT OPTION; grant all privileges on *.* to root% Identified by password WITH GRANT OPTION; 予任何主机访问数据的权限 3、MySQL>FLUSH PRIVILEGES修改生效 4、MySQL>EXIT 退出MySQL服…
阅读更多...
严重: StandardServer.await: create[localhost:8005]

严重: StandardServer.await: create[localhost:8005]

①看看任务管理器&#xff0c;是否打开了多个Tomcat程序 如果是&#xff0c;关闭其中一个 ②可能是端口冲突 1、将tomcat安装目录下的conf/server.xml中的8005端口号改为其它的端口号。&#xff08;不建议&#xff0c;因为会衍生出其他错误&#xff09; 2、将正在使用的8005端…
阅读更多...
ACdream区域赛指导赛之手速赛系列(2)

ACdream区域赛指导赛之手速赛系列(2)

版权声明&#xff1a;本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/DaiHaoC83E15/article/details/26187183 回到作案现场&#xff1a;http://acdream.info/onecontest/1014 前言&#xff1a;自己出份山寨版的解题报告。 - - - - - - - - - - - - - - - …
阅读更多...
java里short，int，long，float，double范围及可写位数

java里short，int，long，float，double范围及可写位数

一、取值范围 1、int二进制位数&#xff1a;32 包装类&#xff1a;java.lang.Integer最小值&#xff1a;Integer.MIN_VALUE -2147483648 &#xff08;-2的31次方&#xff09;最大值&#xff1a;Integer.MAX_VALUE 2147483647 &#xff08;2的31次方-1&#xff09;2、short 二…
阅读更多...
第六周编程总结

第六周编程总结

6-1 求两数平方根之和 &#xff08;10 分) 函数fun的功能是&#xff1a;求两数平方根之和&#xff0c;作为函数值返回。例如&#xff1a;输入12和20&#xff0c;输出结果是&#xff1a;y 7.936238。 函数接口定义&#xff1a; double fun (double a, double b); 其中 a和 b是用…
阅读更多...
【CH5105】Cookies

【CH5105】Cookies

也是一道线型动态规划的好题…… 读入每个人的贪婪度之后&#xff0c;对其按照从大到小的顺序排序&#xff0c;定义状态f[i][j]为前i个人&#xff08;排序后&#xff09;分j个饼干的答案&#xff0c;那么答案为f[n][m],考虑状态转移方程。 1、若给第i个人的饼干数大于1 &#x…
阅读更多...
POJ 3614 Sunscreen

POJ 3614 Sunscreen

Sunscreen Time Limit: 1000MS Memory Limit: 65536KTotal Submissions: 12907 Accepted: 4534Description To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her hide with sunscreen when theyre at the beach. Cow i has a minimum…
阅读更多...
十六进制转八进制（java）

十六进制转八进制（java）

问题描述　　给定n个十六进制正整数&#xff0c;输出它们对应的八进制数。输入格式　　输入的第一行为一个正整数n &#xff08;1<n<10&#xff09;。　　接下来n行&#xff0c;每行一个由0~9、大写字母A~F组成的字符串&#xff0c;表示要转换的十六进制正整数&#xff0…
阅读更多...
sharing-jdbc实现读写分离及分库分表

sharing-jdbc实现读写分离及分库分表

需求&#xff1a; 分库&#xff1a;按业务线business_id将不同业务线的订单存储在不同的数据库上&#xff1b; 分表&#xff1a;按user_id字段将不同用户的订单存储在不同的表上&#xff0c;为方便直接用非分片字段order_id查询&#xff0c;可使用基因法&#xff1b; 读写分离&…
阅读更多...
java中math类方法之数学运算（pow,exp,三角函数，指数）

java中math类方法之数学运算（pow,exp,三角函数，指数）

Math中定义了许多的方法&#xff0c;通过Math类就能直接调用&#xff0c;均为static类型。 1、 调用形式:Math.方法名2、三角函数方法&#xff1a; static double sin(double a ) &#xff1a; 返回角的三角正弦static double cos(double a) &#xff1a; 返回角的三角余弦s…
阅读更多...
java中如何将数字转换成字符串（int转换为string）

java中如何将数字转换成字符串（int转换为string）

String s "123"; int n 12; 方法一:通过包装类来实现String ss String.valueOf(n); 方法二:直接通过空字符串数字的形式转换为字符串String ss ""n;// 方法三:强制类型转换String ss &#xff08;String&#xff09;n;
阅读更多...
UVa 297 四分树

UVa 297 四分树

感觉特别像那个分治的日程表问题。是f的话就填&#xff0c;否则就不填&#xff0c;然后同一个表填两次。那么就是最后的结果。 1 #include <iostream>2 #include <cstring>3 #include <string>4 #include <map>5 #include <set>6 #include <a…
阅读更多...
java二维数组初始化（动态，静态）

java二维数组初始化（动态，静态）

int[][] anew int[][]{{1,2},{3,4},{5,6,7,8,9},{}}; System.out.println(a.length);//4,表示数组的行数 System.out.println(a[0].length);//2&#xff0c;表示对应行的长度 System.out.println(a[1].length);//2 System.out.println(a[2].length);//5 …
阅读更多...
JS中for in 与 for of

JS中for in 与 for of

// 数组var A[4,6,74,67]; for in:拿到的是数组下标 for (let i in A){ console.log(i); } //0&#xff0c;1&#xff0c;2&#xff0c;3 for of:拿到的是数组元素 for (let i of A){ console.log(i); } 字符串 var str"hellllo world"; for in:拿到的是字符串下标 f…
阅读更多...
最新文章

Copyright @ 2022~2023