33.尚硅谷_css3_2D变换.wmv原创

变换啊，OK，变换我们分什么。2D变换跟3D变换，今天我们先讲2D变换啊，我这个课件应该是有套路的。啊，这边是过渡，过渡跟变换嘛，啊也叫变形啊，OK，过渡啊变形变形有2D变形跟3D变形，先讲2D变形，OK 2d变形看有几种，旋转平移，斜切，缩放，是不是先把这四种最基本的讲一讲，好看什么是面形？C是什么属性，全性我们用过。我们用它转过是不是大风车嘛啊，不是花瓣嘛，是不是是全放属性允许你修改CSS视觉格式模型的坐标空间啊，反正是官网上面的东西，规范上面东西都都很会总是不是OK，全部属性只对。会计元素有效，好我们来看一下，那所以说一般有权中的都是div理解啊，好不要瞎整，好来看一下。

好零散。我们讲什么2D。B。变形是不是也叫2D变换？来看一下，好，CTRLC直接贴个关CTRLV。好，来看一下，现在我们看什么都不要好，全三性搞得简单一点。两秒好来看一下，是不是没有什么其他东西啊，这个这个就不要了，圆角也不了啊，圆角可以要用OK来看一下，那现在是不是就是一个圆。是不是OK，这时候可以写个巨款膜啊。就寒风是不是走你？

样式。30皮草。200匹仓。然后是温压是不是OK，好比如说我让它转起来好怎么转，我们说现在是不是没有全是风属性啊，来看一下后面是开始干嘛，全是干嘛。呃，第一个我们要讲什么。旋转吧，是不是rot的函数吧，是不是OK来看一下，比如说我让它转个362度看走你。看它转不转。是不是就转了三百六是不是，你看旁边是不是出了滚动条，是不是，一般这个滚动条会影响我们的体验吗？怎么办？这边来一个黑的。这变那个overflow head是吧，走你刷一下，你看是不是就什么拽起来了，你看是不是有过渡的，说一般过渡是跟它干嘛会同时出现的，不然这个变化他也没有什么。

没有运动效果啊，我如果没有过多，就这下你看好像都没动吧，其实他赚了，真的，其实他赚了，这干毛给个270。切，他转了看到没有，不过是什么瞬间过去的嘛，一般我们都会让他跟着过渡一块来，可是你没有发现啊，这个全身性它有个坏处啊，好像只能单吃吧，是不是我想手指移开的时候，我让它一直转珠。得通过GS来控制吧，是不？所以说全三线这种动画好像不是太太太太太完美是不是？那BDC3里面是不是有另外一种动画来对它做补充的啊，这叫CSS3ANIMATION。动画啊，还有同这个an动画，我们会放到后面讲啊，先讲全三型动画好，这里。

好，那来看这是旋旋转吧，而且这个旋转是绕着谁中心点是不是好？记住这个叫做基点。啊，绕着这个基点再转嘛，啊，这个基点是可以改的啊，现在是中心点嘛，是吧，OK，绕着中心点我再是吧，OK，而且是好像是有一根打了一根什么，就是插了一根管子，插到什么屏幕里面去了吧，是不是是不是绕着这个什么管子在转，能理解啊。好，嗯，这是第一种叫全是是不是OK，还有吗。平行啊，叫全内塔X跟全是内塔Y来看一下，首先来个全是内塔。你看这边是不是带单位的里面啊，记住里面是要带单位的，OK trans。X，比如说让你走个300PX走起来好，邱海红同志跑起来看见没有，是不是跑了300，那没讲OK，走你为什么他还会回来啊，你喝上去的时候是不是有个全是波嘛，你不复的时候是不是还是这个状态，状态也是有改变的吗？懂吗？OK。

好，那就是什么。圈内Y吧，好来看一下圈内它Y轴点，你看是不是往下走了，正直嘛，坐标轴坐标轴嘛，啊一直在强调这个问题，好这眼好，那再来看，那是不是还有一个叫圈。你说这个时候应该怎么走，是不是这么走就就还是就应该要斜着走好一点，来看一下。周年确实写的多，那么你讲OK，好，那是不是讲了位移啊，三个移啊，记住带回的单位也要带单位，OK，这里还有什么，这个就有点鸡肋了，我。

嗯。哎，好像他说还可以设置单子吧，看一下这个确实里面是不是还可以设置单子啊。单词代表什么意思啊？只表示如果正数表示XY向正方向位移吧，负数表示反方向位吧，设置单时只表示X为一，Y轴不变，相当于全身的X为100加值是不是来看一下，如果是一个单值，这里上来看见没有能不理解啊，OK，这里。好，继续往下走。这叫。过渡第二个什么。平移吧，好，还有一个斜切，哎，这个东西真的是好，我们来看一看啊。OK，我现在是不是个圆啊，啊叫什么SKW是不是叫skill是什么。

函数好像是叫不是叫什么是Q函数来看一下。怎么读的忘了。翻译好像不给我读啊。没网了吧？OK，来看一下它是一个什么鬼，它里面干嘛跟的是什么？也是角度，比如我们让它斜切45度。看什么叫斜切？这是一个正子吧，这么切的拉着是不是拉着你这个正斜杠上面两个耳朵是不是这么这么拉的能不理解？OK，如果是负值呢？说一下你看是不是拉着什么另外两只耳朵走啊，OK啊，曲晓峰四个耳朵好OK，这里好来看下这什么，这叫斜切啊，是不是看斜接还有什么。

是不是有X吧，是不是我们我们讲的什么，就是讲了一个么吧，来看一下那全母。XY我就不讲了，一样的X。代表什么意思？X是一个负值吧，如果是正值呢？你看那是不是正斜杠上面两两个耳朵负子呢？反斜杠上面两个耳朵吧，那是不是还有Y，这个Y看一下45度时怎么办？走，你看。咋拉倒？咋拉到是不是沿着这个Y轴在拉，是不是刚刚呢，是不是沿着X轴在拉。看见没有，是不耳朵还是这两，一个是这么拉的，一个是这么的，是不是讲就这么了两是不是这么。

能不讲OK，那刚刚我写的是个简接属性嘛，是不是啊，如果单值的时候干嘛，单值就相当于是X只表示X轴扭曲，Y轴不变，等价于。30度零吗？正的没讲好，也就是说其实我这两个值道吗。我是可以穿两个的，都是四度啊，你看这个这个怎么了，这么两个都度，看来怎么了，刷一下。也已经拉没了吧，想想你两个都是45度拉的话，是不是就干嘛直接拉成一条线了啊，那太爽了啊，这里好是不是四乘高线。好，那这是我们的斜切啊，这个斜切的用处不大啊，刚刚那个旋转位移的用处很大啊，再来看最后一个什么手法，OK叫什么？

C掉什么，那这里面是不加单位的啊，比如说说法成原来的两倍，看着又要胖。走，你看到没有啊，脸越来越大，来点五呢。好，这不叫瘦脸，这叫干嘛，不知道干嘛，OK，这不干嘛，这是变小了，能没讲好，这是说法，这里面讲好，当然它也有什么。他也有XY，他当然看干嘛也有什么写单词吧，给看这个单词嘛，单词时只表示XOY轴上面缩放力度。一样的什么意思啊，我们一开始讲的讲的那些，如果是单子是不是只有X产生有影响这个呢？写单子是什么XY的，那这种API文章的事情，我以后就不会给你们讲讲那么详细了。

懂不懂API上面A边上面都可自己去看，有没有讲OK，那我会稍微提一提，那这个就是什么，你看XY都都有吗？啊，如果什么scale X。走，你是不是还有什么Y？这里变了，那么你讲简单吧，OK，好，那讲一些过渡上不简单的东西，好来看一下几点，我们刚刚说大家来看现在我所有的变化是不是都是。看这个是不是按照中心点在变，是不是来个斜切。SKW是不是找你，我说45度，看它是不是也是按照中心点的。是不是中心点OK位移呢？位移，其实就没有什么积点不积点。300PX看位移。位移是跟你初始位置有关系的，就没有什么几点不几点了，旋转呢，旋转是有几点的。

旋转个360度吧，是不是，你看旋转是有基点的，重点是不是啊好，那很明显这个基点应该要可以换，来看下今体怎么换，全form膜orange n是不是来看一下。怎么去换这个基点，OK，比如说它为top啊，第一个好像是X，看一下左。上看行不行，看左上角，那他应该按照哪边转，左上角转吧，这可能不是很好看，那怎么办呢？不让它是圆的走你。看见没有，左上角在转嘛，是不是，那能不能写，那这个位置应该是随意的，这个位置应该是。

随意的看。啊，这这不可能啊，这这这个这个怎么玩这个吗？还是什么中心点啊，不可能又又上又下的啊OK，那当然他可以写什么P值你。看是不是10P跟十篇讲，我稍微再大一点，五十五十。折你你看是不是按照它五十五十这个点在转这个点嘛，是吧，所以说它是参照于什么左左上角来的吧，那是不是感到这种东西的话，昨天我们说一定要看看百分比行不行，是不是要看10%，10%啊，这个就要敏感一点了。行不行也行，是不是自己尺寸的10%啊，那如果是百分百，百分百呢，是不是到。

这个点了吗？是不是因为它是什么按照左上角来进行偏移的嘛，百分百百分百不这个嘛，下来了嘛，那不就是到这个点吗？能理解吗？那这些API维度上的事情现在要干嘛，要知道怎么去学啊，能理讲OK，那叫基点的变化，知不知道那这个基点的变化里面对谁是不会造成影响的。啊，你这个旋转斜切跟缩放都应该是对会对这个机体变化会对它造成影响的，来看一下我们干嘛，比如这个缩放。输放成原来的两倍是吧，你看。很明显是有影响的吧，你看就按照这个点来说进行这个缩放了，斜切呢SK。45度折年，那肯定也是有影响的，怎么讲按照就相当于这个点被定住了，懂吗？可是位移呢？位移就不会了，全是X走一个300PX位移，因为位移是参照原来的。

位置一模一样的，你基点是哪个都行，基点只要在我身上都可以，你在哪怕在外面也行，是不是？因为我是站照你原来的位置进行什么位移的嘛，懂吗？说基点变换的话，对位移是不会造成太大影响的，这能理解吗？OK。好，那么这边最最基础的三个是不是咱们已经讲完了，OK。啊呃，五个啊，我这数学真的是啊，这最基础五个应该没有太大难度吧，是吧，OK，就是API。