话说这一日孙悟空师徒四人来到了移动web国,唐僧觐见国王,国王问尔可会我国之语言?唐僧说陛下,臣唐玄奘不通贵国之语,国王说那么请你学会了再离开,接着便派人来围住了馆驿,我们的故事就从这里开始了

我们的2D主要学习框架

** 比如让这个图片如何进行以上的位移缩放旋转效果**

** 方便小伙伴进行记忆哟**

1.位移一般是移动自身原来的位置 比如transform(-50%,-50%);就是让一个图片移动沿着自身x,y轴的50%
2. scale(值1以上是扩大里面数字的N倍 1以下是缩小里面数字的N倍);

3.rota();一般写的是度数或者turn圈数,正值是顺时针,负值是逆时针

4渐变色切记前面的属性名是背景图不是背景颜色即可

字体图标的使用我已经放在这里啦,大家可以按照参考进行学习哟,同志们

这就是我国的一件小宝,你们学会了再给我离开 国王说道 悟空又开始了五百年

接下来就是我来带你们看看我国第二件国宝3D以及动画的时间啦 移动国web太后说

这里呢给你们总结了3D效果的瑰丽

因为Z轴是面向浏览器以及咱们肉眼的轴 所以呢我们需要给其加一个透视的属性名 透视的属性值最好给到800-

比如说这个运动员可以理解为在网页上看到Z轴的一个变化

加了透视我们就可以在网页上看到Z轴的一个变化

比如说这个运动员可以理解为在网页上看到y轴的一个变化

既然你们想倒换官文 那么请来把我3D的好处学好了再走 移动web国王道

规则：

1.大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向

2.大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向

动画

数据在网络上是以很小的称为帧（Frame）的单位传输的，帧由几部分组成，不同的部分执行不同的功能
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

以上就是我国的动3D以及动画的语言,快开始敲起来吧

2D和3D总结

我们移动web国可是和你之前到的pc国大不一样啊, 唐玄奘听到后忙说陛下!

网页一般是逻辑像素比较常见 硬件呢一般是物理像素

我们需要有视口标签这样可以达到我们想要的理想视口。

什么是二倍图呢? 其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。

精灵图的宽度/装精灵图盒子的宽度=倍数

简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

接着宰相flex道 法师可知我flex的名号否?

flex布局极大的提高了我们布局的效率，更简单、灵活。以下给大家有一个非常形象的总结

千万不能给别人的爸爸加 就像你的女朋友不能让人家上来啃一样

这是给大家总结的主轴对齐的代码一定要记住哟

这是给大家总结的侧轴对齐的代码

比如说这个效果,我们就可以通过flex让一个子盒子水平和垂直居中

接下来就是伸缩比了,也就是面试官常问到的flex:1;

比如我们需要做这个效果

这样我们就可以布局好每一个板块占得份数了,每个子盒子写 flex：1； 此时每个子盒子各占三分之一。

就像小时候吃的蛋糕一样,家长都会给每个孩子进行平均分配

小蜗你学会了没?

# 接下来就是难点啦!敲黑板!重点

怎么让弹性盒子在弹性容器里换行呢?

flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子 那么flex布局就说到这里啦!宰相拜拜手说道,悟空赶忙道谢 多谢多谢了!

接下来就是我们的端口视口移动端的适配方案 丞相道：

0. flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多
1. flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势
2. 让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

接下来就是rem这个移动适配常见的讲解

八戒 你可提前了解这里的照相馆么 他们可是不用px而是用了新的属性rem和vw,猴哥这么厉害么,看来俺老猪也是要多去拍拍这里的照片了

问题：

0. flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小

   例如： 当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px

1. 我们的设计稿里面元素大小是固定的吗？ 是 ， 而是 px 单位 ，但是我们开发的时候，要使用 rem 才能适配。

2. 那怎么把我们测量的px 转换为适配的rem呢？

   直接使用测量的px值 / 37.5 就是 rem的值

后面我们学习vue开发的时候，所有的单位我们写 px。就足够了。

`box {
width: 100px + 100;

// 注意：单位的转换 计算的时候以第一个单位为准

height: (100 / 37.5rem);

// height: (100rem / 37.5);

// height: 100px – 50;

margin: (20px * 5) auto;

padding: (10px / 5);

border: 1px + 2 * 3 solid red;

}`

悟空还没有写完代码么?观音姐姐让我陪她念经去了!

法师可知什么是vw 兵马大元帅道 !

哎呀呀贫僧知道了,听说贵宝地是可以让照片互换元素啊!兵马大元帅说:这是自然,法师请看

---

那我怎么听说居然还有限制啊 我说要1200px的他居然给了我998px的照片呢

法师这你都不知道么 呼呼哈哈哈哈

预知后事如何且听下回分解