尚硅谷前端基础 (125)

好，那么关于变形的话，我们再最后再说一个东西，新建一个文件，我们叫做一个零七，我们说一下我们这个变形的一个叫做缩放，呃，缩放的话就比较简单了，就是对我们元素进行一个放大，还有这个还有缩小啊，还有缩小在这呢，我们来创建一个这个文件啊，然后在这里面我们来写一个div，点一个BOX1 box1的话，我们在这写一个样式啊，自带个标签，点一个BOX1 box1呢我们给它来一个外。啊，来一个100个像素，Hi呢，也来一个100个像素啊，然后background color background color，我们给它来一个井号，一个BFA这个颜色直接让运行一下。A出来了，我们就直接看啊，我们在这个，我们给它来一个这个trans啊ti ti transition我们给它来一个两秒啊，两秒一个过渡时间，哎，我们通过什么呢？我们通过这个ho来展示啊，直接我们点一个这个BOX1，然后冒号我们来一个ho，当他后以后的话，我们给他设置一个这个transform。

Transform它里边有一个这个放大缩小的，我们叫做一个这个scale啊scale呃，Scale的话，这里边我们来说一下scale我们有什么呢？哎，有这个叫做一个哎，SKYX啊有什么呢？还有这个SKY，还有Y，诶一个是X轴放大，还有一个是Y轴放大，我们来看效果啊，我们先看X，我们直接来一个scale，一个XX的话，这里边它需要放大啊，放大很简单，Scale这个是用来什么呢？用来对我们这个诶对这个元素进行这个缩放的啊，缩放的函数啊，缩放的函数，那这里边scale X就是X中缩大放大啊放大啊，当然不一定是放大，也可以缩小，比如说写个2SCALE2的话，那就是放大两倍，你看X，哎，我还是给它调整一下位置啊margin我们来一个这个100，然后呢，100PX，然后来一个凹凸保存，挪到中间去，我移动，哎，你看X轴方向是不是变大了，哎二就是两倍，那我要写20呢，那就是一个。

20倍啊，就会变得非常大啊，当然这个东西我们也可以缩小，怎么就缩小了呢？我写点儿啊点儿它就缩小了，对吧，就可以缩小了啊，可以对它进行放大缩小比较简单，比较简单还有一个一个我们叫做skyy scary呢，是Y轴方向垂直方向对吧，垂直方向的，那你写二的话，就是Y轴方向放大两倍啊，放大两倍这么一个效果。还有一个我们叫做一个就叫一个scale啊，就叫一个scale，那scale什么效果呢？Scale就是双方向啊，X轴和Y轴双方向放大，所以常用的就是这几个啊，SKYX这个是我们这个水平方向放大，不一定是放大啊，缩放，水平方向的一个缩放，SKYY呢是我们这个垂直垂直方向的一个缩放，哎，然后scale就是一个双方向的缩放，双方向的缩放，所以这个时候呢，就可以得到达到一个这个放大缩小的效果啊，放大缩小效果很简单啊，也不难，然后的话，其实利用它的话，我们可以做一些功能出来啊，做一些功能出来，什么功能呢？哎，还是利用我们这个图片，哎，有的时候是这样的效果啊，这样的效果我们这写一个。

Div div我们点一个，我们叫一个img的rapper wap啊rapper啊，这个div呢，我们给它做的简单一点，我们直接来一个点一个div，我们点div啊，叫一个img的一个rapper wp啊我们先我们就演示一下它的作用是吧？哎，VI呢，我们给它来一个200，哎然后呢，Hat我也给它一个200个像素啊，200个像素，然后呢，这时候我们给它设置一个borderder，哎，Bo迪亚borderder我们给它设置一个一个像素，然后red，然后来一个solid啊solid那既然是img的riper在里面，我们需要放一个图片啊IG我们放我们现成的一个安点GPD，安点GPD，这个图片呢，我们给它设置一个大小Y，我们就直接是一个哎，100%哎跟它的负元素高度宽度是一样的，这样它就可以把这个负元素给撑满了，对吧，是这么一个效果，这一保存，诶我们这显示了一个图片，那这里边我们需要做一个什么效果呢？我们见过呢，对吧？很多网站都会这么一个效果，我图片移动进去以后，它会有一个什么呢？会。

有一个放大，图片会放大啊，图片会放大，就像我们之前，我们之前做过一回那个很早的时候做过一回个网易新闻的那个客户端新闻的这个，这这这这这这这个导航条，这啊这这叫新闻栏，这对吧，我一进去以后，它是不是会这个图片会有一个放大效果，诶放大效果，那这里边我们就可以做这么一个效果，那比如说我现在我图片移进去以后，我希望让这个图片会有一个什么呢？会有一个放大效果，那要怎么办呢？哎，我们直接来直接来一个点一个IgMg，我们给他来一个ho，哎，或者我给这个IG rapper绑定ho啊MG这个rapper我来一个ho以后呢，在这里边我们直接对它ho里边，它里边的img进行一个放大，放大的话简单就是一个这个transform transform我们直接来，哎，我们这个放大肯定是双方向，我们直接来一个scale scale，比如说我来一个1.2，也就说我要放大一点二倍，这不能放太大，你放太大就就不好看了，对吧，我们放稍微放大一点。

啊，放大一个1.2倍，那这样的话，我们移动进去，它是不是就会有一个放大效果了，哎，当然这个图片我们没有加这个过渡效果，所以我们这里边我们给它img加上一个这个transaction transaction我们直接来一个两秒就完事了，啊两秒，诶两秒点长，我们来一个点二秒吧，这一刷，这一移动走，是不是就会有一个放大的效果就出来了，哎，放大效果出来了，但是其实你也会注意到了，放大是放大了，但是实际上我放大完了以后，我这个元素是不是从这个负元素里出来了，哎，出来了，因为它放大了嘛，本来它的大小是跟负元素一边大，对吧，但是我放大以后它就从负元素里出来了，所以我们还需要在负元素里加一个overflow hidden啊，把多余的部分给它裁掉，那这样你看是不是达到这么一个效果呀，哎，图片在我们复元素里边放大啊，跟那个网印的一个效果就一样啊，当然我们这个做的呃，结构上比较简单一点，但是你以后遇到再复杂的，它也是这么一个方式啊，就是放大图片，调用我们这个SKY啊，调我们这个SKY好，那这个是我们说的一个这个缩放，当然。

我们这说完了X轴说完了，说完了这个Y轴，那是不是你要想到是不是可能还有Z轴啊，哎还有Z轴，我们这写一个scale z scale z的话，其实你会发现我写完了以后在这没有任何效果，诶你看我Y轴的时候还可以放大呢，哎，Y轴保存一下，Y轴是不是还有反应呢？哎，还有反应，但是当我改完Z以后，它就没反应了，是不是没反应了，哎没反应了，诶你说老师是不是你又没写那个诗句啊，我写一个perspective啊，Perspective我们这写一个什么呢？我们写一个这个800像素，800像素啊，你注意了，这玩意儿你写上啊也没用。

写上跟没写是一样的，是不是没有任何作用啊，哎，没有任何作用，为什么没有任何作用？因为我们这块Y轴你要放大，它放大的是什么？放大的是轴，它把那个轴给你拉长了，懂这意思吗？那现在我们这个块里边OK是有一个Y轴，Y轴是不是在这里边插着呢？他把Y轴给你拉长，或者把Y轴给你缩短，那问你对他有没有影有有没有影响，没有影响对他是没有任何影响的，因为他就是在那里穿着，就好像，就好像我在一个绳上穿着一个纸片一样，我去拉这个绳，或者是去缩这个绳，对纸片实际上是没有任何影响的，所以外轴缩放比较特殊，使用的也不多，什么下场景下能用，什么时候能体现出这个外轴的缩放，就是我们刚才做的这个复仇者联盟这个。我们直接运行一下一打开啊，现在它是转着的，对吧，我现在先不让它转了，我们就演示一下这个Y轴缩放，我不让他转了啊，不让他转了Y轴Z轴缩放啊，那在这儿的话你就能看出来了，我们这儿直接给它来一个这个。

我们这直接来一个这个一个这个Z，我来一个100下，哎，来一个两倍，我把Z轴缩放两倍，这时候你发现什么效果了，是不是整个这个东西就被拉长了，哎被拉长了啊，我让我让它转一下肉的一个这个我让它沿着什么呢？沿着外轴转45度，45度，这时候你这时候你发现是不是它整个被拉长了，我来一个三倍，你看。是不是又被拉长了啊，Y轴转45度它就倒过来了啊，换成一个X轴这样一个小。我们先让它转啊，先让他转，先它转45度，我不转，我看一下不转是这样的。转完了是这样的啊，它是往往下转了，我们还让它沿外轴转一下，连外轴转一下，我希望它是一个这个，哎侧过来的对吧，侧过来的效果，那现在我们这个图片是不是跑这儿来了，哎跑这儿来了，现在呢，我们给它设置一个Z轴放大啊，Scale一个Z，我来一个这个两倍，这个时候你会发现什么效果，实际上就是把这个整体拉长了，Z轴在哪呢？在这儿呢？因为如果你没有这个一个3D效果，这个Z轴是体验不出来的，所以你要想看这个Z轴的一个效果，必须得设置什么，哎，必须得设置这个立体的一个效果啊好，我把这注掉，把这动画恢复好，那再回到我们这儿啊，所以这个缩放就比较简单了啊，Z轴相对来说比较少，我们用的话主要其实就是4SCALE比较多，一般的话我们就是什么呀，双方向去哎，水平方向也缩这个这这这这这个垂直方向也缩啊，双方向的进行一个缩放，好这个是我们说的第七一个我们的一个这个缩放的一个效果，那关于这个变形的东西，我们其实呃，大体上就有。

就说完了，然后如果要再补充一下的话，就是还有一个东西，我们叫做一个呃，叫做一个个orange，一个orange，这是什么呢？这个是说的是我们变形的一个原点，变形的一个原点，它的默认值呢，是一个center啊center表示的是一个什么呢？中间的，所以你看我们现在它这个缩放，它是什么呀？它是不是从中间往外缩呀，哎，从中间往外缩，那这个值呢，我们可以改一下，比如说改成一个零零，那这时候你再看它这时候缩嘛，还是不是从中间往外缩了，不是了，就是从什么了，从我们这个点往外缩了啊往外缩了，那这个时候如果改成一个200，诶来一个这个20像素，然后呢，这儿也是一个20像素，那这时候再缩放就是什么呢？

哎，就是大概从这个位置开始存放，所以这个时候它是指定了一个变形原点，你说你这个变形是从哪开始的，它的默认值是什么呢？它的默认值就是中间啊，默认值就是一个center啊，Center也就是说像我们之前你用的那些translate呀，哎，用那个rotate，它是不是都是围绕着终点去转的呀？哎，你说我不想让它围绕终点转了，我可以通过这个orange来改变它的这个。

变形的一个起始点啊，哪作为我的参考点，哪作为的原点啊，是这么一个东西，这个东西我们在这儿就现在说一下，后边我们用到的时候，我们会再去强调啊，后边我们可能还通过讲完GS，我们还要做一些动画效果，对吧，那个时候我们再去强调这个原点的一个事儿啊，好，那么关于这个变形的话，我们就说这么多啊，那这个动画相关的东西我们也就给他说完了啊，就说完了，然后再往下，我们又要回到我们最开始那个话题，我们又要再回到我们的布局上，哎，我们要说一些其他的更高级的哎，布局手段，哎，但是在此之前自己尝试着把这些动画东西先给他整明白了啊，好，我们先说这么多，停一下。