39.尚硅谷_css3_3D变换.wmv原创

对啊，那我们讲3D啊，我们可以看一下我们3D最后的一个成品。啊，这是我们在移动端最后后续做的一个3D的一个产品，OK，来刷一下啊，可能可是这个阶段我们还没有办法去做，可是我们要基本的诶啊这个不管这个一个来改啊，就可能少了一面墙是不是啊，这是我们做的最后的一个3D的成品啊，那其实是专门在一些比较大的公司的话，是专门有那些策划的一些小组，或者做一些呃前端的UI的，做这种宣宣传活动也好，做这种策划的活动也好的一些一些一些活动小组，他们专门专门前端大发，专门是做这个的，就这个组专门是用来做一些啊宣传的页面啊，活动页面啊，就比如说我天猫双11，我有好多活动，有好多炫的一些就是简介啊，或者邀请函什么的，那专门有小组去做这种事情的啊，可是可是咱们得知道你们的方向，其。

其实并不是这个方向等等，所以说我我给你们做下这个东西的话，其实也是一个最简单的一个东西等等，你要真的深入去做的话，其实很多里面要，那你们涉及到很多数学里面的图形知识啊，算法知识啊，好多好多啊，你们讲你要明确你们的方向是什么，你们的方向是web前端工程识啊，就是你们最终就是要放最大力气去学的，其实是一个数据的一个交互，懂不懂，那前端界面界面的一个画法，移动端的响应式的PC界面的方法，是每一个前面工程师都必须掌握的等等，可是到这个阶段之后啊，前端就要分方向了啊，你是数据处理更多一点，还是说像这种比较啊，前面交互这块做的东西比较多一点，懂不懂，那我们对你们这个定位啊，因为我们要让你们成为这个行业里面就比较主流的一些前端工程师懂不懂，那一定是往数据前后台交互这个方向去发展的，有没有讲啊，所以说这块东西啊，是每一个前端工程师的一个。

收到以后可以往这块东西去发展，对，那今天我们可以把3D这个基础先跟大家来讲一讲。OK。好。啊，其实我们这边是二级的一个编码。啊，刚刚有同学问了一个比较好的问题啊，所以说我跟大家去跟大家去说一下。啊。好，我们昨天是不是用做了一个扇形导航，是不是在做这个扇形导航的时候，我们看我们时间是怎么绑的。但是我们事是把给谁了，我们这个后时间是直接把给这个后素的，这个后面是里面这个我把给这个外吗。

有吗？我们说这个外的位置是不是跟home是相等。是不是我说看一下吗？你看我这个外跟我这个后面的位置不是一样的吗？那我是不是世界绑给他们俩都是一样的啊，千万不能这么去想啊，事件的机制不是说哎，那我问你们，那我出来，现在我几个元素是不出来了，那问你这几个子元素到底在不在我这个光盘内部的。这个吧，啊，记不记得我们世界里面有一个机的冒泡地址，也就说现在我点现在我点这个小按钮是不？我说小按钮的时间我是给的谁的，小按钮的时间是给谁的。对啊，你看每张图片的吧，每张图片出发的是不个事，会不会冒泡冒上去。

是不是给这些你们就去绑定个事件啊，冒泡冒上去冒到一上，冒泡冒上去冒到外身上，是不是也就说如果一开始我这个后悔的事件啊，就是他自己能赚这件事情啊，如果把这个事件绑给了外法，你说靠不靠谱？靠不靠谱不靠谱，为什么之后你在做这一块的时候，触发他们事件的时候，他也会是触发到外部的的一个事件的，事件是有个冒合机制的，能不讲啊，所以说后时间就改home，千万不要改外号，也就是说你以后去绑定事件的时候的话，一定要根据我的动结构来，也就是一定要根据我HTML的结构来，并不是要根据这个页面上面图形在哪边。啊，不是这样的冒泡就是不这样的，不是说哎，我现在点点他的时候，他就会冒了，因为他没有任何的包裹，并不是样的，你得看他的结构，他结构是前头的，那就不模跑。懂吗？啊，OK啊，当然你如果把时间发给外塔，你可以阻止冒泡吗？懂吗？OK，那这个之后我们再讲移动的时候会遇到很多冒泡的问题啊，OK，那这个时候跟大家去提一提，好，那我们来讲3D。

零二来一个3D变换，好，3D变换不同于2D变换啊，3D变换里面有好多概念，首先来看一张图。这是我们3D里面的坐标轴啊，能不能看懂啊，你看X轴，Y轴，Z轴。有没理讲这是前端的一个三维的坐标系的啊，这个坐标系跟我们数据你坐标是不一样的，说过很多遍了啊理解一下好，那来看一下好，那3D电型啊，有3D说话，3D血段跟3D平移，唯独没有3D。斜切啊，因为3D斜切，你一个元素有厚度吗。

斜线没有任何意义，懂吗？是不是没有3D斜线的，可是有3D缩放，有3D旋转，有3D平移，是不是其实3D缩放也比较积累，你元素有厚度吗？Z上面可以缩放吗？能吗？没办法缩放的，可是3D双方它是有用途的，我们待会来讲一讲是不是，那我们先讲3D啊，旋转是不是OK，那先来写个端。在DEMO的话就用哪。请JC直接先T过来玩的。你看03D的旋转是吧，3D旋转OK，来看一下好呃，这样吧，我就留一个外部元素吧，其他都不要了啊，减S一个的标好的。

算一下这是一个div是不是好，这个div应该让它居中的，看有没有居中。We。嗯，元素啊有点多啊，干掉全部干掉。是不是只要看居中就行，OK，嗯，这应该就居中了。是不是，而且还是个元宝啊，就是元宝。是不是，是不是在这边啊，接来个PI bank ground pink，是不是啊，好，一般我喜欢里面有一个九外啊，OK，好秋秋啊秋怎么样，秋寒你看是OK进来，他是他。L等于什么，是不是来来一个横高是不是行高，为什么？反的国200是吧，200PX啊方哎，一般写杭高最好直接写的这边算啊。

200PXOK，微软呀，对吧，是不是这个行高一般就不要了啊，这我们航国一般小法都都会这么写，OK是不进来了，好来我们玩3D旋转啊，OK，呃，我们说在嗯这个外后背上去的时候，在我这个外侧干嘛？在他后背上去的时候，我们知道你要测变换肯定得有一个过度的，不然干嘛效果不好看的是不是，那你一秒钟转一转，OK，好，怎么转后外上指时候让你发生一次变化，全是爆马，之前我们学过一个的360度，记得单单位折点你看是不转了是是没他问题啊，是是体的钻是不？其实就是什么，我们有一根针啊，中间在这边相当有个钢管戳进到你屏幕里面去了，是不是，那这叫按照哪一根轴在转。

按照哪一根轴在转，现在Z轴在转，所以默认其实就是按照Z轴在转这里。刷一下等等，只不过这个的是2D变化的就不一样了，他就3D化。懂吗？效果是一样的，懂吧，有柔体的任就应该有柔体的X，这是按照谁按照谁谁来算X轴，那问你按照X轴转是不是应该是个3D的旋转是不是，你看是不是3D旋转是不是来比如说我它转的瞬间，你看这是不是，其实在3D旋转这个地方过程当中啊，你发现只是从一个圆变成一个椭圆吧，是不是啊，你看按照我的理解的话，我觉你们觉得这个3D的感觉强吗？不强，一点都不强，是不是为什么？按照我的理解，应该这有一条边，应该是要刷到我眼睛上。

是不是现在只是把这个圆压扁了而已？是不是压根没有一个很强的三级效果吧，是不是，所以说你看外头呢，你的外头的也没有一个很强的三级效果。你看如果不知道它是圆，这个效果你就就可以看到，不然它是个圆，只有你，你会发现它只是把这个盒子干嘛，你看是不是就变小了，在每个中间啊，是不是就在挤压这个盒子一样，没有3D效果，我们说应该让你有一个3D的场景，是不是啊，OK，那怎么办啊，我还是把它变成圆。好，我们说3D是不是应该有个立体空间感的啊，要营造这种立体空间感，首先你得知道这东西是景深啊，景身是什么？景深是指相机对焦点前后相对清晰的成像范围，在光学中，尤其是录影或者摄影是一个描述，在空间中可以清楚成像的具体范围，能不能听懂，换谁谁都听不懂，换我我也听不懂，你要是没有学过透视学，或者你们要是要是没有预防，对没有学过透视学，你就干嘛。

不是透视学，摄影学，怎么怎么说到透视学，你如果没有学过什么光学啊，学过物理啊，如果对对这种东这种东西就是没有深入了解的话，我觉得我读这句话你都不知道我在干嘛，我自己读的时候我都不知道我在干嘛，懂吗？那前端对谨慎理解就干嘛简单的来理解啊，上面这个就是什么官方的一个定义，看一看就行了啊，这就是用来装逼的啊，就是把你说到不懂，就说明我这个东西厉害，讲好简单的理解，景深就是我们肉眼距离，显示距的距离，这句话能不能听懂啊，这句话听不懂，出门左转啊，景深越大，元素离我们越远，效果就不好，是不好景身的叫做不是，是OK，那我们看我们设置个景身。

叫perspective是不是我们说紧身是100是是来看一下走你刷一下。3D。哎，好像是不是没有啊，是不是再来看，如果我说外面你包一层啊，比如说真正做去去做运动的不是这个办法。是里面这个什么阴了，是不是OK这个音了，把它改成什么。阴导懂吗？OK，这个谨慎我们给谁，是不是给这个我们看给给这个阴导行不行。

没有任何效果是不是？文字不也没了，是不是我们再来一个文字吧，邱海，邱海峰走，你你看是不是跟我们刚还是一样的，哎，这就不管。Y和后上取应该让谁啊？让这个音呢，是不是啊，那我给这个外也去什么。描一个编码是不是OK，我们的这个外部稍微的大一点。嗯，Y为300PX吧，400稍微大方一点，OK，汉也为400PXOK，来个波为EPX的实它这个在哪，是不是在这边，你看我在后边，就是它是不是转了。是不是好，你们可能感觉效果不好，那怎么办呢？你看现在我是不是在他后上，就你看这个东西懂了是不是，其实他也是按照什么这么结构来的吧，不是看这个元素的位置在哪的懂的OK，你看我不是在后面上去，我就让你他这个音干嘛拽起来了是吧，那我就嗯稍微写的好一点，好写的好一点的话，那这些东西我就应该给谁。

居中是不是应该给这个外方是吧？OK，那就是负200，负200那写好一点。那是不是这样了，让他在这个盒子里面也是垂直动吧，那干嘛。也一样吧，CTRLCCTRLB吧，这个是负100。啊，是不是一样的，OK，现在是不是没有任何的3D小果，你看我这个紧身给的是谁的，阴了的，注意，我把这个紧身给外。找你说到你没有没有身体效果了，有了吧，是不是OK，你看再来走，你进去是不是有了，出来是不是有了，是不是OK，我们说这个紧身有没有作用。

有作用，可是这个景深是作用给自己这个元素吗？不是作用给它的子元素。所以一般我们写3D的时候，结构一定是嵌套的，外面肯定要有一层舞台的，这个就是来搭3D舞台的，是不是这里面才是真正去做3D变化的一个元素，能不能讲OK，一般景深要给。外给一个包裹，包裹里面有一个元素，真的要去做三体运动的理解吗？OK，来看一下，那我们比如说让他按照什么。XO，让他转转。你是不一样的，甩到你眼睛上了，为什么现在能甩到你眼睛上了，大家想想，紧身是100吧，你甩出来是吧，是不是就有100了？你一个圆嘛，你想想我一个圆是不是按照，比如说这个就是那个圆嘛，按照它的基点是不是在基点是不是还是中间那个点啊，是不是在转啊，这边100，这边100嘛，你现在热点距离屏幕的距离就是100嘛，那就正好甩到你眼睛上是不是，那如果我让这个体身大一点，是不是也不会甩到你眼睛上。

可是我们说我们应该是可以看到3D效果，是不是，我说谨慎变成500来看看算下有没有看到3D效果，有没有不强烈，那谨剩点200。周年。有没有三体效果，是不是就有这个3D效果了，所以这个紧身的控制还是比较重要的，懂吗？OK，你看我不给紧身这个效果刷一下，你就是个扁平化的效果是吧？一旦别的紧身立即感觉就来了。是不是，那这个是不是椭圆，椭圆的海虹就来了，能不理解，OK，那这是我们说什么，我们说这个是流体的什么。诶，你看我们现在转的是谁啊，转的是里面这个音量吗？那这个音量是不是去产生的一个3D变化，你看X转它是咋转的，我把这个时间放慢一点，放这五秒。

我们说现在是X里面一个正子吧，咋转的。是不是按着他的头啊后推的，是的，我们说现在你的点在哪，在中间吧，我们体的X个正直，是不是按着你的头往后推啊，相当于提着你的脚往前拉，是不一样的，走你你看。是不是，你看我如果是个父子。拉着你的头，是不是推着你的脚吧，能没讲OK那一样的呢？我如果是个正直，按着你的右右手往里走。是不是安？往重新来。

你看是不是你按照你的右手去往去往里面走啊，对讲，可是有时候我们说现在我们的基点是不在这边，你还有右边可以让你按吗？如果的几点到这边来了，没有右边可以按了吧，那政治其实还是往右边按的，相当你往右边按不就是往左边往外拉吗？能不能理解就说一定要切，切记正直，就是按着你的头往里。推，要么就是按照你的右手往里推。有没讲按着你的头往里推，按照你的右手往里推，其实就是提着你的脚往外拉，提着你的左手往外拉。能理解吗？啊，这个概念给他什么稍微记一下就可以了，懂吗？OK，那我们来看，好，那其实这个我们来看，现在我们我们说这个景剩咱们是刚刚提了一下啊，然后我们说的这个什么3D的一个缩放法是不是OK我们来看，那在这一块我们说什么，哦不，3D什么旋转吧，柔体的X相当于是干嘛绕着杠杆在转是不是啊，柔体的Y呢？啊，这个你们自己想一下，是不是相不相当于是在修杠管五。

能不能理解啊，OK，你看的Z呢，是不是绕着Z的转，是一个转盘啊，能不能理解，OK，那其实还有一个叫的3D，你们看这个是干嘛。的3D函数是不是啊，所3D前面你看是不是XYZ啊，比如说我X上面是一，Y上面是零，Z上面是零，问你其实它是按照谁谁在转，X在转，其实这就是一个点，懂不懂具体你这个变化旋转，这个变化是谁在转，就是你圆心到这个点所形成的一条射线。按照这个走再转。啊，这叫射线懂吗？线段是两个点的，射线是一个点的，直线是没有点的，这就不叫了啊，OK，这个能不能理解啊，那现在他应该按照X来做法，只有你。

没写角度是吧，转个360度找你。说下是不在转是不，那如果这边是零，这边是一，说明照外在转是不？你这边写一写写三有关系吗？有关系吗？没关系啊，懂吗？就是按照你这根转懂吗？这个点不就正好在什么外轴上面吗。懂吗？OK，那这个呢？任子在转，是不是你写100都没关系。这个点反正我在什么那度上是圆心到这个点的一条射线，按照这个按照这条射线在转，这能不理解，OK，那如果想想我写。我写，那其实就好玩了。一你看他按照谁的吧，只你是不是相当于是一个饼在这边嘛，比如说哎我的面是不是这样的，是不是一是哪一个点这边往前走一个往下走一个，往前走一个，是不是相当于按照我这个点的转，这个点的转是不是就这的转那个点看。

是不是是不是，而且为什么是写的你的圆，你的圆心是不是在这个中心点啊，你看我，那我这个点呢。我这个点是不是在我的可能稍微要偏向吗。呃，一是不要稍微偏下面，偏下一点点，是不是那是底了。哎，我是不是相当于按照这个做，是不，那不讲是不，我这个是不是我的原型啊，我圆心的X轴，我们这这样看的话，X在这边嘛，Y轴在这边啊，Z轴对我吗？那其实它是按照这个点在转。

是不是笔尖的这个点在转吗？懂不懂，那他现在这样去转一个360度嘛，然后看我的页面能不能想象到。是不是你看这个点有，你看这个点有又在哪，是不是在自己的座位的下方那么一点点。是不是这个能理讲OK啊，这个就稍微有点是这个三体的一个什么3D的这个空间感，这能理解吗？OK，我们再来看，那这就是体的3D，总共3D里面有几个XYZ体的3D，这能解吗？好，刚刚我们也讲了一个，稍微讲一下这个什么景身棒是不是OK，那我们再把这个3D。平移也讲一讲吧，3D平移的话其实OK，来看一下3D平移。Can。

好，之前我们学了2D的平移吧，是不是OK3D的平移，OK3D平移这块大家想想，我们说这边应该是柔体的。我们之前学的什么全X跟全Y吧，是不是3D呢，其实就是往里走的，所以说3D应该就比前面多一个啊，不是全身的Z100PX往里走100X吧，来走你。看下不往往外走吧。我现在紧是多。仅是200吧，我如果仅是100，直接贴你脸上。直接贴你脸上吧，是不是？但是如果我让你往前走101了，你应该要跑到我脑袋后面去了。

没了是不是？你看我一松出去，他慢慢回来。是不是也是正好走100的时候直接贴你脸上啊，虽然有点恶心是不是啊，直接贴你脸上，那不讲为什么，这时候你的肉眼干嘛，正好是拒绝他什么一这这个。这能理讲，OK，那有全世界大小，全世界能不能写百分，能不能写百分比？元素有厚度吗？我们说全X全是Y都是有百分比的，这个百分比是不是参照于你这个核模型的Y是不是太大？那确实的内是不要称称对自己的厚度了，有厚度这一说吗？没有，切记确实对内千万不能使用百分比，一旦使用百分比，你看。就没效果的能没讲OK，也就是说你如果做垂直水平去做的时候，Z组上面能有百分比吗？不能啊，为什么？因为我们有一个变化，叫做全贝塔3D能写XYZ的对不对？比如说这边我们可以写一个3D，大写小写小写是吧？比如说前面两个你写百分比都没问题，后面这个你就不能写百分比啊，你要写个小字字只有你。

看到没有，是不一旦你说我这边也来个板分板完蛋啊，一颗老鼠屎坏了一锅粥，那没讲好，切记这上面不能百分比，你说你在做垂直水平居中时候，我们说这边是不是写负50，负50%啊，负10%，你这边一定要干嘛写零。你能不能理解啊，OK啊，切记你看负的话就是往里走嘛。是不是啊，OK，那我说这边负再负一百分之X，那是不是就是一个缩小。

是不是就变小了，往里走什么，所以说我们景深它有一个功能。近大元小，这是不是仅深干的事情，是不是本来的话是一个扁平化的东西，现在就有了近大圆小的感觉了，是吧，本来你看如果我没有这个竞争。看见没有，我往后走的这个100有任何作用吗？没有，压根就没有一个金大元小的感觉，是不一旦有了紧慎呢？就有进大越小的感觉了，那边讲啊，所以说写3D这个景色极其重要，懂吧，OK，好，那还有什么3D拼音还有什么。是不是就有3D333D缩放了，想想这3D缩放标Z吧，里面跟一个因子吧，有意义吗？没有任何意义吧，你我有没有厚度，你说话我干嘛。

是不是啊，可是我们说在变换组合的时候啊，它确实有点意。是不是问你这个数放Z的话，能不能去影响到Z上面的偏移啊。啊，它的意义在这，那么你讲我们看3D03。3D什么？这里3D做法都看一下，好，这个3D做法我们做。应该怎么办了？死掉是吗？Z吧，是吧，比如说Z组上面，我让你放大成自己的两倍是不是。OK，你看有任何意义吗？没有，可是我们说有一个叫做人体的什么3D吧，只有你两倍，两倍都都是两倍吧，只有你看。

可是厚度上面有没有说法，没有感觉，这个感觉有点像我全X往前走的感觉吧，近大的感觉是不是OK，可是诶，这个是这组上面这个说法到底有什么意义，我问你，如果我全Z，我让你走一个100PX是吧，然后。Z，我让你换算成原来的两倍啊，这个时候走，这个时候走多少？这个时候走多少贴到脸上了吗？那这个景色放大一点，300。这时候其实走多少，大大觉得他往前走。折多少？折100磅？能没讲，因为你上来先做的平移嘛，坐标系没有被你被你放大嘛，然后你做一个什么Z方面那个放大嘛，对我这个东西不会产生任何影响吗？计算的话，它其实是这样计算的，懂不懂，OK，那想想如果这如果这样的。

刷下相当于往前走。是不是是不是，你看我刚刚这种写法。现在要往前走。说下。走100是不是，你看这个呢，走。能不讲如你这种写法，你这种写法相相当于什么，确实对。200。那么你讲你看。是不是到200立方听。是吧，你看这这个呢，到200立方平。

一模一样的大小吧，那讲好，那全实自的作用，就这这边变换的时候，他说稍微大单独使用他，他有作用吗？没有。这个事情能不能理解啊？给个反应给我能不能是吧，OK，好，这是我们的3D说话，那3D基本的API就是这三个啊讲完了。讲那3D的其他东西啊，在这里面还有一些比较深的东西啊，多少这个基本API应该可以过吧，OK。