尚硅谷前端基础 (124)

好，那刚才做完了这个钟表的练习呢，接下来我们再做一个练习啊，那这儿我这儿有这么六张图片啊，123456，一共有六张图片啊，那这是一个，诶复仇者联盟里面的一个图片啊，我先来呢，创建一个件夹，把图片放进来啊，新建文件夹，这叫做一个14啊把图片放进来，我要做一个什么效果呢？哎，你看六张图片，那其实呢，我们会发现，如果这个图片直接在网页中呈现的话，它它并不是很好看，但我希望现在什么效果呢？哎，我希望现在把这六张图片给它拼成一个立方体，我们都是立体四个面六个面嘛，对吧，拼成一个立方体，那这个我们要怎么做？那首先我们这个图片大小都是固定的，都是一个200乘以200，那我们尝试着做一下啊，做一下在这呢，我们来新建一个文件14啊，我们就叫复仇者联盟，点一个HDR，那在这里。

这边呢，我们先写一个页面结构，那我们把它运行一下，保存一下，然后运行，那既然我们想写一个这个立方体对吧，那在这里边我们先来创建一个什么呢？呃，创建一个这个外部的一个容器啊外部容器，那这个时候呢，我们就叫做一个cub，叫做一个cube吧，啊cube啊cube表示一个cube cube就是这个，哎，这个正方体的意思啊，立方体意思，然后呢。这个cube我们给它整个设计一下的样式，Style标签，我们点一个CU be CU be的话，在这儿我们直接是一个200像素，Hi的是一个200像素，Background color background color，我们给它来一个井号，一个bic bv的这么一效果，然后我们给他来一个margin margin的话来一个100个像素，然后来一个凹凸啊，凹凸a u to，把它放到我们这个屏幕的一个中间的位置啊，中间的位置，然后呢，我们肯定是要做一个这个3D的一个效果，所以这个时候我们需要先要设一下它这个perspective perspective呢，这块我们要设置一下它的一个这个，呃，它的一个视距，视距我们还是来一个800个像素，那这一块设置完了，那当然这一块呢，它是我们一个容器，待会儿这个背景颜色我们是不需要的啊，不需要的我把它背景颜色给它去掉，嗯，去掉不要这个背景颜色啊，留着也可以先留着，待会我们再去，然后呢，在这儿我们来引入我们这个图片啊，引入我们这个图片，在这我们先整一个div div的话在这里边我们放一个I。

MGMG的，我们这个是一个M点鞋盖，一个MG下的一个14下的一个1.gpt，我们先引入这一个out我就不写了啊，这一保存一刷新，诶我们这个图片是不是就出来了，哎，这个图片出来了，这个图片出来了呢，我们来诶我们来一点点去调，我们再整一个吧，我们先引入两个图片。也有两个图片，但是这个两个图片其实大小我们都知道，它的大小都是一个这个都是一个200乘200的啊，200乘200的，那这里边呢，我们也设置一下第二一个CU be下的一个这个div，我们把div的宽度也是固定到200像素，Height也是200像素，但是这写不写其实都行，因为本来图片就已经可以把它撑开了啊，然后的话，你要注意一点的话，图片下边会多出一个边，多出一个边还是那个问题，我们给它处理一下，我们直接img，我们叫做一个ver tical line，我们来一个这个top啊，给它对齐一下，这个边就直接就没了啊，没了，现在的话我们这是两个图片啊，两个图片，图片整出来以后呢，我还希望有图片也有一个这种半透明的效果，那这样我们的效果看起来会更好一点，那我们怎么给图片设置透明呢？其实没有给专门给图片设置透明的方法，但是我们可以给什么呢？我们可以为我们这个元素，为我们元素设置我们这个透明效果，透明效果怎么设置，我们一个属性叫做一个OB city。

它跟那个rgba呢有点像，Rgba它只是颜色透明，而我们这个T它什么特点呢？它是给整个元素都设置透明了，所以这个时候比如说写一个0.5，那这个时候你注意它就是整个元素都变成了一个半透明，而不是仅仅是颜色啊，所以它比那个更厉害一点，我们把这个点七吧点不清楚了。

诶点是七，我们这么一个透明效果对吧？好，那现在我们设置完了，当然现在产生的问题啊，这个背景颜色我们现在在这儿，这所以有点绿啊，然后呢，我们这两个图片，它现在是一个竖着摆着的一个情况，但是我们说我想做一个诶3D的一个效果，对吧，我想做一个立方体，那这个时候我们这个图片是不是应该，哎在这个六个面上去排列呀，哎六面上排列，所以这个时候很很显然我们这个div应该给它做一个绝对定位，那我的这个图片是不是就重合到一起了，哎，让我们这个图片重合到一起啊，设置一个绝对定位，绝对定位完了我们就可以再给他们去设置变形了啊，这个div我们给它起个class啊，Class我们叫做cub，我们叫做一个一个BOX1吧，那这个div呢，我们给它一个class，我们叫做一个BOX2，那现在我们要给他们来设置变形效果，我们先来给BOX1设置，BOX1是那个1.dbg是吧，1.dbg，那这个时候我们来看一下我让它怎么变形，我们直接给它来一个这个。

Transform啊transform transform的话，我们要先让它什么呢旋转，因为这个图片我们是要，诶我们那个立方体嘛，上边一个边，下边一个图片，左边一个图片后，右边一个图片，然后前后是不是各一个图片啊，一共是六个面，那这两个呢，我希望啊这两个一个是在左面，一个在右面啊，一个在左面，一个在右面，那在左面和右面的话，那我是不是就得进行旋转了，哎，旋转的话，那我们这块应该是沿着一个Y轴去旋转，所以我先给第一个图片，我来一个rotate的一个这个Y，我让它转什么呢？转一个90度啊，转一个90度一保存，现在是不是看不见那个第一张图片了，哎，因为转了90度，等于那个图片现在是在这立着呢啊，在这立着呢，它是立起来了啊，它现在等于已经立起来这个图片是吧，现在是冲着这边的啊，冲这边了，那现在的话，我让我们的BOX2也同样转90度，但是我们如果让它也转90度，这两个图片就是一个方向了，我们应该这两个。

图片应该是一个背靠背的关系，所以我让它们的关系是一什么呢？是一个负90度啊，负90度，负90度，现在这两个图片等于在中间，它们两个是等于什么呀，等于贴到一起了，紧紧的靠到一起了，就像一个扑克牌的面一样，但是我们现在希望的效果什么呢？希望的效果是不是这两个，一个应该在这边，一个在这边啊，哎，在两端，所以这个时候我们要设置一下他们那个距离，你要注意了，现在我的图片是在这边呢，冲着它的面是冲着这边，那我现在是要让图片往这边去移动啊，这个图片我是往这边去移动啊，那这个移动我应该是也是平移，怎么平移，注意这个平移我是移动的一个Z轴，因为这个是Z轴，是不是一个朝左一个朝右了，所以我们要设置了一个Z轴平移啊，我们要设置一个穿四类的一个什么呢？Z轴平移干嘛呢？一个平移100个像素，每一个一个往左平移100个像素，一个往右平移100个像素，那这样的话，他们是不是正好在我们。

的图片的两端呀，然后一个往左一摆，一个往右一摆，那这样他们两个人之间的距离是不是就是一个100个像素，哎，那这时候你看我们这个立方体的两个面是不是就出来了，哎，左右两个面就已经出来了，哎是不是非常简单呀？哎，那同理，我们左右两个面出来以后，我们还有我们再整一个什么呢？哎，我们再整一个这个上下吧，上下上下，我们这来一个这个三，这也来一个BOX4，然后这是一个3.dbg，这是一个四点DBG2个图一出来，诶美国队长出来了，对吧？现在他们在哪呢？现在他们是在我中间呢，在中间呢啊，这两个同在两边，这两个同在中间，那现在我希望他们一个在上边的面，一个在下边的面，那这个时候我同样还要对它们进行旋转，我们直接来一个BOX3，那这个时候旋转的话，我是不是应该让它往上转了，哎往上转，那么转的话就是沿着Y轴，沿着X轴去转，哎往上去转，那上边是不是就转上去一张，哎三就。

已经转上去了，那这里边注意他们平移的距离同样也是100个像素，每一个平移都是100个像素，因为我们需要他们间距是一个200像素，对吧？那所以这个时候就上去了，那同理我们下边的一个BOX4 box4的话也是一个ROT的X沿着X转，那这时这时候是一个负90像素穿类的X也是一个100，那这样的效果是不是就上边一张，下边一张，诶上边一张下边一张，那现在等于我们这四张图片就把我们这个立方体的一个四个边给围出来了啊这块怎么转呢？待会你写的时候你要细心一点啊，然后下边我们在写的时候还有两个图片，一个是我们五，还有一个是六，五和六就简单了，前边后边对吧，前面后边，所以这个是我们的一个五，这个我们的一个六，这是五，这个是六，格式化一下，诶保存那图片出来了，那一个往前一个往后，一个往前一个往后的话，那其实。

他们就不用平移了，哎平它本来就在这个位置，对吧，就不用平移了，不是不用旋转了啊，不用旋转了，不用旋转的话呢，其实我们这个五还有六不用旋转，但是穿四类的是不是还得去移动啊，哎，所以其实呃，那这里边啊，它说是不用旋转啊，不用旋转，说是不用旋转，那对于一张图片来说，比如说BOX5我可以不让它转，我只让它什么呢？我只让它平移，那这个时候它是不是就跑前面了，哎，一张图片我们就可以跑前面来了，但是这个时候对于另一张图片，我们的BOX6，如果你也直接让他去这么去做的话，那这个时候这两个图片是不是叠到一起了，哎，叠到一起了，所以这个时候注意我们还是有一个图片需要去旋转呢，那这个图片要怎么旋转呢？这个图片要旋转到后边去啊，旋转到后边去，那这哥们不旋转不旋转他是不是直接就跑前面去了，这是谁呀？不我我看看啊，五五是不是这个女的呀？哎，这个这这个红女巫是吧？哎，那这个时候他。

它是在这个前边的，在前边它，所以它不用旋转，直接一个穿字类的，而我们这个图片这个这个整个他们整个团队这个图片它是是应该朝后，因为我们后边还少了一面啊，后边还少了一面，所以这个时候我应该让它整个干嘛呢？诶整个它整个竖着直接转什么，直接转一个180度转到后边，所以这儿我应该是一个肉体的一个Y，然后直接来一个180度，让它转到这个最后边，那这样这个图片是不是就跑到这个最后了，诶我们看到这个。效果现在看起来是有点有点奇怪对吧，有点奇怪，感觉上这个距离没整出来似的，我们把这个上边也写出来，上边这个呢，我们应该是一个RO rotate的一个Y，它应该是转的是一个零度，也就是不转的一个效果啊，这一保存，那现在是这样一个效果啊，这样一个效果就变成这么一个3D的一个效果了，但是现在的话，你会感觉这个东西它不是，哎不是那么明显对吧，不是那么明显，呃，感觉上好像这一个更靠上，这是因为什么呢？这是因为我们BOX56的层级更高，层级级更高的话，他有点压着那个BOX5了，所以咱们这样，哎，我可能更希望他们整个团队是在最前边，所以我干脆干嘛呢，把他们掉一个，我让这个红女巫啊转180度，让她转零度，不然你得调整一下层级也行，那这样的话就是这个，诶这帮合影跑前面去了，然后那个红女巫跑到这个后边去了，然后现在我们这六张图片就构成了一个什么呢？立方体啊，构成了一个立方体，那现在这么看的话不太清晰，那我想让他们转。

这样行不行呢？哎，转的话就直接转他们的四元素这个，哎，Cube，哎，那我们直接让他来一个这个transform，然后让它沿着什么呢？让它直接沿着来一个rotatetate X X轴转一个45度，然后呢，Rotate的一个ZZ轴呢，再转一个45度，这样我们能看到一个诶等于是一个侧面一个效果，但是即使你转完了以后，发现转完了变成一片了，对吧，还不如不转那个效果，为什么转完了成片了，我转的是谁？转的是副元素，转完副元素以后，它会整个变成了一个片儿，为什么变成了一个片？注意了，默认情况下，我们这种穿form，或者说我们这个这种变形的一个效果，它默认情况是一个2D变形，那么2D变形的话，虽然是有这个视距，有视距，它也是一个2D，只是2D层面的一个这个近大圆小效果，如果你希望显示的是一个3D的一个变形效果，那这里边我们需要设置一个transform style，设置一个什么呢？诶APP。

Perce的一个3D，这个表示一个什么呢？这个表示设置的是什么呢？设置我们这个，哎3D变形的一个效果，那这样你把它设置完了以后，你把它设置完了以后，它的整个变形，你看它就会考虑到整个的一个3D的一个效果，那这样就很明显，我们看到它是不是就是一个立方体啊，哎，立方体等于中间这个是谁，中间是我们这个CU be这个副元素，然后我们这些块都是在它的周围，中间这个背景颜色你其实就可以去掉了，一保存是不是就得到这么一个很完美的一个立方体啊，哎，那你如果想，哎，我给它加个动画吧，我们给它加个动画，加个动画的话，我们直接来创建一个关键帧key frame啊，Key frame我们叫做一个RORO啊，让它转起来，转起来我们直接from啊转的话，那我们的话就是从我们这个transform transform transform，我们这写一个啊，写一个这个rotate rotate X。

我们这转从零开始吧，这来一个肉体的Z，我们让两个轴转啊，一个Z一个X，呃，然后呢，这里边我们来一个to，哎，兔让它转什么呢？转一个转一个直接转一个360度360，哎一特。

Turn，哎，直接我让它转什么呀，转一圈，沿着X轴转一圈，沿着Z轴再转一圈，然后呢，直接把这个设置成它的动画效果啊，我们直接来一个这个animation animation动画，我们叫做一个rotate RO rotate，然后呢，我转十秒转一圈这一保存，然后你会发现我们这个立方体是不是就转起来了，诶十秒好像稍微有点快，然后转一个20秒这一保存，诶这时候再看诶30秒20秒。已保存，哎，然后我们这是就得到了一个会转动的这么一个立方体啊。是不是非常简单，而且这个效果其实做完了还还挺好看，对吧，还挺好看，那这里的话，当然它现在是只转一圈，如果你想它无限转的话，来一个这个in非尼体啊in非尼，然后的话，这个东西比较适合匀速运动，我们直接给它设置一个匀速，让它跟这慢慢悠悠的慢慢悠悠圈去转，那这样我们就得到了一个哎，非常漂亮的一个立方体，那这个时候其实。

代码上并不难，其实就是把这东西转吧转吧是吧，往左转转，往右转转，往上转转，往下转转，就拼出了这么一个图形，你自己写的时候，嗯，你最好心里构建出这么一个图形，或者说我这个图形你可以画出来，你自己参考一下，哎，还是一步步来，我先让什么呀，我先让两边是吧，再做前后，然后再做上下对着来，那这样你的结构上可能会更清晰一些啊，这个东西可能对你的这个几何的思维可能需要比较重要一点，是吧，但是也不难啊，慢慢做一下啊，这个是我们说的一个，诶立方体的这个练习，我们来听一下。