尚硅谷前端基础 (120)

好，说完了动画，接下来我们来说下一个话题啊，也是跟他们有点关系吧，我们叫做一个变形，变形是什么东西呢？那变形其实这东西没啥好解释的，变形就是什么呀？哎，就是变形，那比如说我在这儿我写一个这个div div点一个BOX1，我们给div写点样式啊，Style标签啊，Style标签我们这点一个box1.1个BOX1，我给他来一个Y，是一个200 hi是一个200，然后background color background color，给他一个井号，一个B，这里呢，我们再给他设置一个margin，来一个零，然后来一个凹凸，这样的话我们就得到了一个绿色的一个小的电位。绿色的小div对吧？得到这么一个东西，我可以把位置再给它往下调啊，往往下调一调，再给它单独设置一个margin top来个50像素啊，往下调一下，我们得到这么一个来个一一百二百，哎，那我们得到这么一个div啊，那什么叫变形，变形顾名思义就是我们让这个div改变形状啊，改变形状那我们都知道是吧？我们这一个图形，你那像我们这个div它也是一样，它都会存在一个坐标轴是吧？什么X轴还有什么呀？Y轴哎，如果3D上讲，我们还有一个什么呀，还有一个Z轴，什么是Z轴，我们再说一下，水平方向叫X轴，垂直方向叫Y轴，那Z轴是什么呢？与水平和这个与水平和垂直方向都垂直的，你可以这么想象，Z轴是从这个屏幕里钻出来的，直接往你，往你脸上插，这个方向叫做一个Z轴。

啊，你就想这儿中间有一个有一根箭啊，从这咔就钻出来了，直接就往你脸上扎，这个方向叫Z轴啊，Z轴属于什么呢？我们离就是这个元素，元素距离我们的距离成为Z轴啊，这个距离越大啊，这个距离越大证明这个元素离我们就越近啊懂意思吧，Z轴是元素和我们的距离，我们和元素之间一个距离称为一个Z轴，那所谓的变形指什么呢？哎，变形就是指变形就是啊，就是指改变什么呢？哎，指通过我们这个CSS哎来改变我们的什么呢？改变我们这个元素的什么呀？哎形状或什么呀？哎或这种位置啊，它可以把这个元素的形状或者位置去改变了，但是这里边注意了，我们要注意一点啊，变形它有一个特点，变形，它不会影响到我们页面的一个布局，也就说假如说我这还有一个，还有一个div div。

大边我们给它起一个叫做一个box box2呢，我让他跟BOX1啊，哎，我们写写一下，我直接复制一下。同TRLC我复制一下啊，我们这来一个点一个box塞，点一个box塞，我像跟box一个样式是一样的，我换一个颜色，这来一个这个orange啊orange orange呢，我把这个margin这个top给它去掉，那这个时候我们这有一个BOX2，那我们所谓的说变形不会影响元素的一个就是网页一个布局，也就是说待会我如何做给BOX1变形，BOX1爱怎么变怎么变，BOX2就跟没看见一样，它不会对BOX2产生影响，有点像那个相对定位啊，有点像相对定位，那这里边我们来看看怎么变形，我们就拿BOX1举例子，我们来看怎么变形，变形的话，我们有一种就是这个属性就叫做一个啊跟这个有点像啊，注意区分一下用来什么呢？Transform用来设置我们元素的一个变形的一个效果，啊变形效果，那transform这块。

它只是一个大的属性，那具体你想让元素怎么变，我们还要通过具体的值来决定，那这些值其实我们都称为函数，比如说嘛，有一个函数的一个穿L，什么是函数，你先给你先都记住就完事了，你看见这带块的，这都属于函数，比如说之前我们用的URLURL也属于什么，也属于函数，懂这意思吧，也属于函数，每一个函数都有它自己的作用，比如说我们在这要说的是一个translate啊translate，比如说我们这有一个叫做translate X translate叫什么？叫平移，这也是我们要说的第一个变形效果叫做一个平移，平移有这么几种，第一个我们叫做一个translate X，还有一个我们叫做translate y，还有一个我们叫做translate z，这个什么X是我们这个元素沿着什么呢？X轴平移，X轴方向平移，而我们这个Y指的是我们这个沿着我们这什么呢？哎，沿着这个Y。

带轴方向平移，而我们这个Z，那就是沿着什么呢？沿着这个Z轴方向平移啊，方向平移，那至于这个平移的话，这个坐标轴我们可以这么想象，你可以这么想啊，你可这么，呃，实际上它还是有点差距的，但是我们现在可以这么这么理解，这么理解可能稍微好理解一点，仅限于平移啊，仅限于平移，你可以想象着，对于我们的这个平移的时候来说，我们这个坐标是这样的，以它的中心点向右，这是X轴向上这个什么呢？这是这个Y轴，然后直对着我们这个是Z轴啊，你就想啊，从这还有一个箭穿过来，是冲着我们的这个方向，叫做一个叫做一个Z轴，你也可以用你的手去比一下这个姿势啊，用你的手，用你手怎么比，用你的手，你可以比一个这个八的姿势，八的姿势啊，就比如说左手拿左手举例子啊，用你的左手比一个八的姿势，这个八的这个食指，你的食指朝上，然后你的这个大拇。

不指应该是朝左的，就是那个枪一样，对吧，枪朝上，然后你的中指也竖起来，中指冲着你自己，你的中指冲着你自己，那这个手势就是一个这个简单的一个坐标，这个示力，你的大拇指它是水平的嘛，它就属于X轴啊，X轴你的食指是直立的，它属于什么呀？属于外轴啊，属于外轴，而你的中指，中指是不是现在等于是冲着你自己啊，哎，中指就属于是什么，是Z轴啊，你大概有这么一个，有这么一个印象，这个我印象里应该叫做一个左手法则，左手法则，这个左手法则这个其实应该跟我们的这个3D倒没有关系，这应该是我们切割磁磁感线那会儿的这么一个，就这个姿势啊，就这个姿势，你就摆出这个姿势啊，这是切实切割磁感线这个东西是吧，我们引申它当成一个什么呢？当成一个坐标系啊，坐标系你现在你做的时候，这个中指应该是指向你自己的中指的方向就是这种啊。

食指的方向就是外轴这个，哎，这个大拇指的方向就是。

X轴啊，X轴好，那现在我们这里边要说到平移了，我们先演示第一个，我们叫做一个穿丝类的X，这表示什么呢？叫做X轴方向平移，也就是说水平方向平移，那这里比如说我写一什么呢？我写一个100个像素，那这就表示什么意思呢？沿X轴水平方向移动100个像素，那这里边注意坐标在这儿了，那水平方向移动100个，那是不是就等于要往这边移动100啊，所以它应该跑这个位置啊，应该，呃，不是这个位置移动100的话，应该是在这个位置是吧？100没那么大啊，因为我们整个才200嘛，对吧，没那么大，所以这个时我设置完了以后，我们来看效果，是不是它正好往右移动了100啊，哎，这就是一个平移，有点像那个margin对吧，有点像那个margin，还有那个left，但是注意它不会对文档流里边的产生任何影响，你看我这块移动来移动去，对下边元素没有任何影响，那正值是向左移，我们的负哎向右移，负值呢就是向向左移，所以这个平移啊，有点像什么呢。

有点像那个marin，但是还是那句话，它不会影响别人啊，影响别人这也是我们的水平方向trans类的X，那trans的Y呢，是垂直方向，比如说我来个100的像素，Y轴垂直方向，它就会，它就会往下走100，往下移动100，它是不是把我们的这个BOX3给盖住了，哎，还是你看它及使把它都盖住了，它有没有把BOX3往下挤，没有，这个就是我们变形的一个特点，变形它只折腾自己，诶你只折腾自己，你看它会不会导致脱离文档流，不会啊，对文档流没有任何影响啊，不会导致脱离档流穿C力的X往下移啊，当然你负值的话就是往往上移啊，是这样一个效果，很简单，对吧，平移X水平方向Y是垂直方向，那这里我们要注意一个问题啊，注意一个问题，那这里边假如说我这不写一个100%了，我们这换一个啊，我把它复制一下，不写一个100了，我写个什么呢？我写个。

穿丝X，穿丝X，哎呀，这啥玩意。我写个穿LX，这是一个负100，是跑跑这来了对吧，但是这我看着啊，我换我写一个50%，我写一个百分比的数，诶你会发现他是不是往这移了50%啊，那注意了，他往这移50%，它原来的位置是不是在这儿啊，那它这个50%是相对于谁说的，诶是相对于自己说的啊自己说的，所以这里边一定要注意，我们在平移时，我们在这什么呢？我们在这个平移这个元素时啊，平移元素时它的这个百分比，百分比是相对于自身计算啊，相对于自身进行计算的，它不是相对于包上块了，相对于自身，所以这儿我写了个50%，那相当于什么移动它自身宽度的50%，因为是X轴嘛，宽度的50%，那就是100，所以我如果写100%，那就是相对于它自身宽。

速的100%就移动了一个200，懂这意思吧，它是相对于自身去算的，那这个东西有什么用啊，有什么用，我们简单说一下，我把这个BOX2我给它去掉，我们不要这BOX2了，在这儿呢，我们写一个东西啊，我们写一个div，我这来一个点一个BOX3 box3的话在这我们来写个样式啊，我们直接来一个点一个BOX3，点一个BOX3，我们这给他来一个是一个100 100hat，也是一个100BACKGROUND background color，我们来一个这个orange啊orange这么一个100乘100的小方块在这儿呢，那现在我希望让这个小方块在我的屏幕当中垂直水平双方向居中，哎，垂水平方向好整对吧，我们就说垂直啊，居中怎么办？之前我们的方式，我们直接来一个position absolute top 0left 0bottom 0right0是不是全是零啊？然后margin给它直接设置一个凹凸，这样的话就自动就居中了，为什么可以居中？因为它必须要满。

足，我们的那个等式要满足等式，那OK，那MARIN4个方向呢，就必须要设一个，就会设置一个相等的值，然后它是不是就居中了，哎，就居中了，但是这个方式它是有局限的，有什么局限的，现在我们的这个盒子的大小是确定的，是确定的，你盒子的大小是确定的，我们可以这么写，但是假如说我报三里面有字，有字啊，有字，而我盒子大小不确定，不确定，现在我希望什么效果呢？我现在的效果是BOX3的高度宽度都是被内容撑开的，它的大小不确定，我现在希望什么呢？它在我的屏幕当中居中，那要怎么办？那要怎么办？那这个时候我还用原来那个方式行不行了，我们试试啊，TOP0，哎，我们这来一个零，Left 0bottom，然后我们这是零，然后我们再设。

一个marin，一个这个凹拓，我们来看效果，这一保存行不行了，哎不行了，它把我们这整个页面都给整个视口都给撑满了，这是为什么？这是为什么？很简单，因为现在我们没有设置宽度和高度，所以宽度和高度的值就是一个凹凸，所以这个时候它可以去调的值，不仅仅是Mar，有margin，宽度高度是不是也可以调啊，哎，那当你的宽度高度和margin都是凹凸的时候，很显然它不会调margin，它会调什么？调这个宽度高度会让宽度高度值尽可能的大，那尽可能的大就把我们窗口是就给给撑满了呀，哎，所以这个时候注意我们的这种居中方式，哎，我们直接写上啊。注掉啊，这种居中方式啊，只适用于什么呢？只适用于我们这个什么呢？元素的大小确定是啊，确定是，哎，你只要是确定的，100乘100的，200乘100的，300乘100的，500乘500的，只要大小确定我们就能用，但是如果你的内容是你的大小是被内容撑开的，那么对不起，这种方式就废了，哎，不能用，哎呀，好烦人是吧？啊不能用我们要怎么办啊，不能用我们要怎么办？哎，那我们还这回有了translate了，我们就可以采取另一种方式怎么做？哎，当然我们之前还说过一种table那种方式，对吧？我可以把这个玩意儿，把这个转换成这个table，然后设置一个那个text line，然后这个what line，然后居中对吧？那也可以，但是TD那种方式还有点局限对吧？那么这种方式我还可以怎么办呢？呃，首先的话，我们就先演示一个，我们先演示这个，哎，我们先演示一。

个这个水平方向的垂直方向，同理啊同理，水平方向呢，这一块注意了，我现在啊，我给它设置一个left left呢，我给它设置一个50%，什么意思，左侧的偏移就是左侧偏移量是50%，50%注意了。

这个时候它的50%是相对于谁的，相对于负元素的，所以50%也就是这个位置是谁的50%是它负元，不是负元素啊，是它那个包含块啊，包含块是50%，在这儿的话，其实就是我们这个HTM2初始包含块的50%，也就说这一段距离正好是HTML距离的什么呀，一半这一块是不是要另一半啊，所以现在对于这个严肃来说，它是不是在中间了，它不是在中间了，它是在中间偏右的一个位置啊，中间偏右的一个位置，那现在我要想它正好在最中间，那我可以干嘛，我是不是可以把我这个元素往左边拉一半，把这个点它的中线和这个线对齐是不行了，我把它往左拉一半，它在这个位置，是不是正好就在中间了，哎，那问题就来了，我怎么把它左边往左边拉一半，它一半是多少，我又不知道，那怎么办？现在我们有了，我们在这就可以利用我们这个，我们来一个哎，X。

哎，水平方向吗？X，我直接来一个负50%什么意思，我把它往左移动，它的一半，谁的一半，它自己的一半，那这个是中线，这是中线，我把它往左移一半，那是不是等于让它的中线和这个中线对齐了，那它是不是就居中了，所以这个时候我们一保存，那现在它就绝对是一个水平居中的一个效果，那就在这儿就达到了一个水平居中，我们可以简单的去聊一下。这是一个461。这块儿我应该是稍微的有点儿。凉多了。

是不是也是一个461啊，哎，也是一个四百六一，就正好是一个居中的位置啊，正好是一个居中的位置，那这一块我们水平是这样，垂直干嘛，垂直也一样，我们来一个top，我也来一个50%，50%，那注意这变形的时候我们可以连着写，就说我可以给它多变形几次，我再来一个，我这再来一个translate外TOP50%等于我们这个中线，我们先看一下TOP50%啊。套了50%，也就是说我们现在这个这个上边的距离是一半，下边的距离是不是又一半啊，哎，那我们只需要把它往上再移50%，就是它自己的50%是不是就在中线上，哎，所以在这儿我们来一个逗号，哎逗号我们来一个这个translatel，一个Y来一什么呢？负50%还是给它拉上去，这样一保存translate。哎，我们刚才看到它这个位置，我们来看一下啊。

穿外它这来了一个负50%，但是我们看到的效果是它它好像并没有往上去走，对吧，我来看一下啊，我们来大一点负150。哦，那是我这刚才写错了啊，它等于是我们来看一下这个文档吧，刚才应该是写错了transform transform是可以同时设置多个变形效果的，你看哎，那我写错了，等于是多个变形之间没有逗号，直接写就完事了啊，没有逗号隔开我就记错了，所以我这直接穿四列头外一个50%，中间不用隔逗号，直接空格就完事了，这样它就正好是一个什么，正好就是一个居中的，如果你不写它，它的位置应该是偏偏下的，写上它就正好是一个居中的，也就说上边这个距离跟下边这个距离就是一个，哎，就是一个相等的距离了啊，就是一个相等距离，是这么一个效果，好，那这里边我们又说了一个这个平移是吧，穿四类X，还有穿四类的一个Y啊，我们这两种这种平移方式，然后实际上利用平移的话，我们除了可以让一个元素在这儿去居中啊，当然这种居中比较灵活，灵活在就是你这里边内容多少它都可以居中，比如说啊，我这里边。

多了它也还是确保它会是一个什么呀，会是一个居中状态啊，总是垂直还有水平双方向都是居中的啊，都是居中的，好，这是一个，然后的话，我们还是先说这两个东西，这我们待会再说穿越S列的Y，有了这个以后，其实我们也可以做一些小的效果出来，诶比如说我们看之前我们小米那块往下我们没有写，但是我们可以看啊，像这个它这两个块，两个块它有一个什么效果，你看当我移到一个上面以后，它是不是，诶就好像这东西从上边。飘出来似的，哎，飘出来的似的，其实不是飘出来的，它只是什么？这东西只是往上移了一点啊，往上移了一点，然后加了一个阴影，就好像这东西飞出来一样，对吧？飞出来一样，那现在我们有了穿4LITTLE外了，那这个东西我们自己是不是也可以做，哎也可以做，那我们比如说我们做一下啊，我们来看看这宽多大个，你给他量一下。

这块我们就当是一个二百三乘以300吧，二百三乘以300，那在这里边我们直接我直接就在就在这下边写吧，这来一个div，我们来一个点一个BOX4，然后呢，我们写两个啊，写两个CTRLCCTRLV，这来一个div，这是一个box box52个盒子在这呢，我们点一个这个BOX1，哎，这是BOX3，然后BOX4逗号一个点一个BOX5。BOX5啊，我们这是一个200，然后两百二吧，刚才是其实两百三百也可以啊，220，然后hi的是一个300，然后给它设置一个background color background color呢，我们就给它一个哎井号一个这个呃，Yellow green啊，一个绿色这个颜色啊，那现在这两个是一个横过来的对吧？横过来的横过来以后呢，哎，不是是竖着过来的对吧，我让它来一个这个浮动对吧，水平排列，然后呢，我们再给它设置一个marin marin的话，我就直接简单的粗暴一点是吧，左右，诶上下呢，我们不要左右，我来一个这个20像素啊，左右来个十像素吧，哎，左右来个十像素，给他们之间来个间距，那这样这个距离是不是就拉开了，哎，我把这玩意儿给它住了啊，把这玩意儿给它住了，那现在我们希望什么效果呢？当我鼠标移入以后，它会有一个什么，有一个这个哎，有一个往浮出的效果啊，有一个浮出效果，那这里边用它不好看了，我们还是用一个白色。

不一个白色，但是你用白色又看不出来了，那我们整个给这个body加一个背景body，我们给它加一个银色的背景，Background color background color，我们给它加上一个这个silver啊，Silver一个银色的一个背景啊，我们这一保存，哎，那现在银色的。

银色的有点有点深了，我们来看一下能不能改，改的浅一点啊，往上拉一点，哎，是这样一个背景对吧？那现在我就希望我点这两个框中的某一个的时候，它会有一个这个，诶飞出来的效果啊，飞出来效果其实非常简单，比如说我们拿报括四举例子，我们直接来一个BOX4，那移入以后，那我们应该是一个ho，那我们要做的就是鼠标移入以后，我们改变一下，我们让它做一个变形translate，一个y translate y，我们是不是让它往上移啊，哎，往上移的话应该是一个负值，比如说往上移十个像素，那我就来一个负十像素，那这样我一移上去它是不是就不动了，哎，就动了，当然现在我没有加这个过渡效果，我们来一个这个trans tr an SI trans，我们这个变形的话，我们就直接写一个transform啊transform。

Fo穿TS。FM没错，然后时间我比如说我写一个哎，点三秒啊，点三秒这一保存，我们来看是不是就有这么一个效果了，这么一效果，但是我这距离可能有点偏大了，我们小一点来一个负五像，哎负四像素吧，我们来看看效果。哎，这样它是不是就会有一个这个位移了，哎，有一个位移了，你说老师没有飘出来的效果呀，哎，我们再给它加一个音box，诶box的一个这个shadow shadow的话我们零零，哎然后那个呃虚域化半径十像素，然后颜色是一个rgba，我们写一个这个000，然后这是一个点三啊一个加一个阴影，那这样我一进牛哎你看哎，但是现在它这个阴影是不是没有一个动画效果呀，哎，那我们这把它改成一个哦，我们试一下这一保存。

哎，你看现在阴影等于是不是也会阴影。我们把它改慢一点，我们看看阴影加不加的动画。诶阴影也就加上动画了，对吧，阴影也加上动画了，好这来一个点二三，那这样是不是就达到这么一个浮出的效果呀，哎感觉好像它就浮出来了，跟我们那个小米那个官网这个效果就基本上就就一致了，那你要想让这个BOX5也有，那你给BOX5把这后也给它上牌也写上就完事了啊这来一个BOX5的一个，那这两个就都会有一个浮出的效果了啊这就是利用了我们的这个什么呀，诶这个穿类的Y，并且它的好处是什么呀，你说老师我用这个life，我那那那个我用Mar不也能移吗？哎用marin移的时候，它会影响到别的元素啊，别的元素，所以这儿的话，如果你用我们之前的方式，那可能只能用定位了，但是用定位你每个都定的话，会有点麻烦对吧，有点麻烦，但是你用变形就没有这个问题，因为变形不会影响别的元素啊，不用影响别的元素，好，这个是我们说的一个变形的一个平移，但是注意了，我们只说了一个穿四类的X，还有一个穿四类的Y啊，一定要注意，而且这里边我们这强调了一点，我们这儿可以连。

连这写多个变形啊，连着写多个变形，多个变形之间使用空格隔开，而且你要注意啊，你说老师我是边再写一个，比如说我这就写一个穿刺类的X，那注意了，下边这个无论你写了几个，它都会把上边给覆盖了，所以这个时候你写的这个玩意以后川4Y就没用了，懂这意思吗？它会完全覆盖，所以如果你这样不想覆盖的话，你这东西只能写一个，你就记住了我们的一个元素，它只会有一个穿梭梭生效，你不可能我给一个元素同时设置多个穿梭，懂意思吧，它只能设置一个穿梭，所以你需要做的事就是把这个元素里所需要的所有变形全都写到一个穿梭才OK啊，才OK好，这个是我们说的第一种变形平移啊，平移下。