42.尚硅谷_css3_立方体.wmv原创

对啊，我们说刚刚我们已经把3D的所有的基础点，除了被没有讲到之外，其他都已经讲到了，是是，而且我们说到零六这一块，讲完叠加这一块，你们才有能力去搭建一个3D场景，3D场景两个点，第一个一定要有进大学校的感觉，第二个一定要有层次感。懂吗？就这两个点，可是实现起来是有很多人去采的，到那这边我们来做一个实力，做个什么实力呢？来看下。好，我们来做什么？首先我们来做一个地方题。啊，就做做这样的一个立方体好不好，OK来看这这种立方体应该怎么去实现。啊，这个基本上是3D的一个入门的DEMO，懂不懂每个学3D的同学，这种地方你必须要能画出来，OK。咱们这不是一个立方体吗？1356，还有还有四五在两边吧，啊OK，来看一下，来我们来画一个零。

CTRLCCTRLV。离近，好，我们来画个立方体，好，这是立方体的第一版。啊，就写一吧，啊，不写个一啊，写个一你们就就看不懂，有人要投诉我写个一看不懂啊第一吧，OK，那看一下这个第一版。好怎么写，那这个注释我就全部干掉了，是不是OK啊，这些东西全部干掉。是不是OK，我们说我们就手把手来写一个好，首先他看到这个东西好包裹去，我就不说了，肯定得有，是不是OK，得有一个div叫外法，是不是先把这个外盘来设计设计好，我们说写这个外面的时候，你要知道3D场景要不要大了，最终是不是我这个外本里面的东西去做什么。

3D变化说明他上得有舞台的是不OK，那我们说来个外D天写外，比如说应该比较大吧，400片吧，是吧，也是400P是吧，波的为。Ex的实性是是啊，OK，可定性比较重要，放到上皮POI可定性为不上000。为0OK马为OK啊，这我一直都在什么换着用，所以说你们这个吗，一定要记住深一点嘛，OK，那这个吧，这是三板，三板小一点嘛。OK，那里面是不是待会有一个盒子啊，盒子有六个面吧，是不是啊，可是六个面需不需要一个包过去？

需不需要，需要，这才是真正的那个盒子。叫做一个格子几个面，六个面。懂吗？1234566个编码，比如说这是比如说这是前吧，这么写吧，这叫前后左。有上下是不是OK？这么多变码，好问题，待会是谁去产生三体变化？就是我后向上上面转的话，其是谁在转，是不是转，也就是他去产生三体变化吗？能不理讲OK，那我们说首先给什么，他的老爸得有谨身嘛，他的老爸要不要有3D，五台必须得有，是不是4.53D能不理解啊，OK，总体其实没有任何改变。

是不是只不过3D舞台我们已经当了，懂吗？我给他底下什么外底下是什么？它底下的books是吧，好点books OK。这个待会待会是要去转的是不是，可是我们首先先不管，首先我们先把这个盒子给它组装起来，是不是一开始我想把这些盒子铺成这样。待会，待会我走吗？这是一个盒子嘛，是不是，那首先一开始的话，我们说什么所有的前后左右这几个面是不是都得出来，那边讲OK，那我先给这个布来个什么为100P，看为100PX是不是OK，给这个books来一个背景音，什么白光的PI拼拼。

好，是不是在这边啊，OK，我让这个盒子也居中。是不是就可以了，CTRLC它是不是就居中了，是不是OK，你会发现是我写CSS时候一一直CTRLCCTRLB了，不爽是不是啊，OK，这里刷下是不是过来了，然后我问你这几个面是不是还没出来啊，那怎么办底下的。所有的。Div，是不是，这大小应该也是100P是不是？OK，我们给他也统一来背景吧，来个身份。是不是这些面是不是都在这边排着呢，是不是我们它定位立起来，为什么。喂的，是不是参到我这个定位的，OK，我们说他们应该全部叠到一块去了，为什么全部叠到一块去了，你前面没有任何的可以占位的元素嘛，那我就全部什么叠上来了吗？是吧，这个时候他们的left。

Top的值应该会多少，凹吧默认为凹吧，其实本质上应该在这边是设置定的是吧，可是我们这个暂时不设置是吧，因为我知道那会是不是一个个要便移出来了，那top我需要进行操作的嘛，懂吗？OK，那这个上这个我是让他去中间比较好一点。是吧，那给个方差。放的吧，是不是给个片杭高，应该是100片微软雅黑是吧。Tax等于center。好数就过来了啊，写CSS会上瘾啊，其实真的就是你觉得这种东西自己很透彻的时候，写CSS真的要上瘾，特别喜欢写CSS好OK，然后呢，我需要去拼这些面了，本身我这个book是粉色的，这个book是。

在这边了，所有的面都按照这个面去做，去进行定位吧，上面这个面是上去，下面这个面下来吗？右边过来吗？左边过来吗？是不是前后在那边吗？后面这个面还要往后推吗？能你讲OK，那怎么办？上面是谁啊？不是你吧，上面是不是，我们现在找上面是第几个，那是第几个。上面是不他了，这个这个前后左右这个点位，你自己去设下，我现我现在的，我现在设就是这吗？那第几个三四第五个吧，第五个OK，你的培训经好了，你的那应该道那不用动，买个是不错不呢。托，应该是个富的吧，网上走到一看出没出来？

上面是不是就过来了，是不是下面这个面呢。下面这个面是不是第六个是这个面的什么，这个面是不是要下来，那应该改成什么还是放。我写的是吗？是不不是错吗？懂吗？OK，不是，是不是OK，走你这个能不能挂，这个我记得我上次给你们讲过了坐标，其他换了一块，是不是OK，然后呢，还有啥。右边这个左右吧，左边应该是三。是不是左边这个应该干嘛多一般。中间右边是右边负一半，都是负一半。

是不是他right呗？浮100啊，我为什么这么去写啊，因为我觉得大家在写的时候的话，现在一直喜欢使用量跟做法都会忽略，不能跟right啊，其实里面是有一个思维上的一个转变的啊，你做完前端公式的话，你一定要训练自己这个思维上的转变，先学是那什么坐标系的转变，懂吗？OK，来看一下，那前现现在还差什么前后咱们先不管，我们先把它叠起来。是不是这么叠？这是不是我后的第五个，是不是我上面这个面上的这个面，我说是不是应该。推的这个我我全部我全部往后推吧，好吧，是不推他这个头往后推断。是不是是不是应该把这个上这个面往后推，就是是按着他的头往后推推，可是问你几点还的是这个点吗？几点应该是谁哦这个身份。

这样吧，我把这个身份给他换换吧，好吧，这个身份我不怎么好去演示这里。好，我们说你这个基点是不应该在这，应该到这条边去往后推啊，那这个点该怎么办，谁的点要多，上面这个密码是不是第五个，他的什么全是什么。讲应该是什么，下面是不，然后呢，他的圈某的怎么推认哪个走X走正是负责。正直按照你的头往后推嘛，是吧，正直应该在90度。是不是走，你到后面去。

是不是OK，是不是等的，我们看转45的时候是不是看它是不是往后的。是往后的吧，是不是OK，我们说什么转到90度。过去是吧，为什么还能看到这个字，先不管了，是不是下面这个面呢。反正先把他的基应该是错了，正还是负，正还是负。他是不是也得往后，是不是往后是不是相当于现在我的这个头，我的是在我头上了，往后的话是不是相当于把把他把脚往后推啊，把脚往回不就是拉拉着头往往前走吧，正杂拉着你的头往前走，杂的那讲应该负的90度。

也是X的，这个能不能讲OK，负的就是度走你。到后面去了是不是，你看你不信我转负的40度，你们看一下，肯定是肯定是往后走的，是不是OK，负的90度只有你。还有谁左右，左边怎么办？第三个是左边，左边这个全风机点应该也是是左还是右。有吗？是吧，应该是啊，外场是吧，怎么转，绕的哪个走转外轴转怎么转，是按照你的右手往里推吗？是按照左手往里推吧，正是责是吧？来看一下进去是不？来看下我们说负式是不助的时候，其实你如果记不清楚刚刚那种关系，你是你会不会正负值，你是你总会吧，懂吗？OK，最好把这个关系给他记住啊，这个学习代码稍微快一点是吧？右边这个呢。

啊啊左OK这个什么为是不是按着他的右手，那就是啊，右手按着右手往里推嘛，正直嘛，是不是啊后现在我看到是后是后这个面嘛，我我我现该看到谁啊前这个面码那怎么办？CLCCL。是第二个，第二个面怎么办？让他干嘛，把他往后推嘛，全时间。Z吧，往后推多100天，是不是你不对，往后推是啊。是吧，这是不是给他吗？往前走了，往后前面这个面了，前面这面是不是没了，前面这面为什么没了。

前面这个面是不是大家想我这个前面这面是不是第一个，我这个电是不是都是定位的，被压住了吧，被盖着了吧，是吧，那怎么办？最最前面那面，反正我是要看见了第一个吧，啥都不改，一一就够了吧。完美盒子我算完了是不就差让他。转是吧，那干嘛问你转的时候是去断水啊，盒子我是不是已经点完了，OK，然后我就去转了，也就是么，在我外，我说我的外在后的时候，我让他底下的这个不去进行旋转。

是不是，是不是让让他转，能不理解，OK，有一个问题呢，先生。让它转，我们看全风料给了谁给了怪不了，那也就是说我这个他们在转的时候呢，我问你这些面有没有发生三体的一个变化。有没有，他身上有没有3D5台。没有是不是啊，好，我们现在看看这个效果吧，好吧，后的时候不是干嘛，全是什么。的，我让你走外转吧，是吧，转个现么吧，转个度是不给他一个全三行，给你个三秒钟。是不是我们来看一下，只有你和我上去时候。

为什么没有其他面？我问你这些面我在折来折去的时候，成绩上面要不要，需不需要成绩了，你给了吗？你你把成绩给谁了。点外的吧，Box待会在断的时候要不要乘积啊，也要乘积的吧，那怎么办？我们说它是一个不可继承数据，而且只作用于子元素，你这边必须再写一个。不然这些D3是拿不到成绩的，要不理解，OK，这个时我说下再来看。看到没有，是不是就过来了，转的不对吧，是不是啊，旋转的中心点不对吧，改谁的中心点不吧？他的中心点应该全是什么吧，是不是前面上面的还是生的不变，是不是外置上面也是真的不变上面干嘛。

往里走多少50走到自己的一半嘛，是吧，那就是负50P走进去。好像效果不太对啊。Center center。是不是这个身份的，是不是就那个面是不是身份去掉来看一下，感觉怪怪的。不对啊，我不基点不就是在Z轴往里吗。是不是我现在是不是转的这个面啊。是不是对这个面吗？我这个面的地点是不要往后走50。那是不是就是负负50P。但是你后边。是不是春分工就不就是剩的剩的负50P吗？没有问题吧，只不过我们把这个全分工就写到哪边去了，和的时候呢，我们应该写哪边呀。

初始化部分的时候再去写吧，能不能讲走你刷一下。完了是不是啊，哎，可是我们说大家看，我们说我们看到的这个后居然是反的，比如说我让他赚个一百八让他干嘛。停下来是吧，我能装个180度让你。停下来。你看这个后置是反的，为什么大家想想。来看，比如说。我一开始前后两个面是不是都是正面对着你们的，是不是我把后面这个面是往往后推了，还是不是依然是真正面对你们的，讲这个转过来，你们看到什么，是不就是跌倒的，你是应该把它这么转过来。

你你看是不是这样的，你是不应该把它这样转过来，应该绕着X再转多。都这个是不是，那怎么办。谁啊，后面这个面嘛，第二个面嘛，第二个面干嘛。X180度。注的这个旋转会影会影响这个位移吗？不会，这两个位置能不能换，不能换OK，所以你看一下。没毛病，是不是立方体咱们是不是就出来了，只过出来这个立方体，我们说还是没有讲到这个吧，是不OK，我先把这个地方里的视频我先听一下。