尚硅谷前端基础 (122)

好，说完了平移了，我们再说一个啊，再说一个呢，我们叫做一个，其实就是我们刚才一直提到的那个叫旋转，旋转零六，我们叫做一个旋转，呃，旋转呢，其实也也很简单啊，我们把这复制一下啊，不再写一遍CTRLV粘过来，我们把这些注释呢，先给它粘掉啊，这个视距呢，我们也设置上啊，然后呢，现在先运行一下。现在还是这个Z轴效果呢啊，把这Z轴给它去掉，现在没有效果了啊，没有任何效果了，什么是旋转呢？旋转就是使我们这个元素啊沿着这三个轴旋转啊，可以转对吧？那我们在这来说吧，哎，通过我们这个旋转哎，可以使我们这个元素沿着什么呢？哎，XY或什么呢？或Z轴，哎，旋转一个什么呢？哎，指定的一个角度啊，指定一个角度，那这个东西比较好理解的是我们先来看谁呢？我们先来看这个YZ轴的旋转啊，Transform还是transform啊，都是transform，不同的是它里边那个函数啊，Transform里边的函数旋转叫做一个rotate rotate，我们这有一个rotate，一个Z啊，Z rotate z。

我们这写着啊，这是一个ZZZZ，这叫一个X，这叫一个rot的X rot的Y都是大写的啊，XYZ都是大写体的ZX表示沿着X轴旋转，Y表示沿着Y轴，Z就表示沿着Z轴，那这个时候我们沿着Z轴旋转一下，比如说我写一个这个Z轴，我写一个45带啊带个度数是吧？角度啊，那我转45度啊，转45度，那这时候你看效果啊，那这时候我们看这轴在哪呢？这轴是不还是在中间啊，所以这个时候我们这整个旋转，它就是针转了，它的圆心在这儿呢，它会沿着向向这边转啊，向这边转，顺时针转效果。

是不是转了，哎，顺时针就转了45度，这是我们Z轴的效果，因为Z轴在中间嘛，对吧，它是一个Z轴的一个旋转的效果啊好，那这就旋转完了对吧，旋转完了然后的话，我们再大一点，我来一个什么呢？45度来90度，哎90度你看。他是不是正好转了一个90度啊，哎，我还可以写呢，还可以写点，我写一个180度啊，约80度，哎，是就转起来了，哎，我还可以写一个什么呀，360度，360度那就。哎，就转回来了对吧？哎，就转回来，这是Z轴旋转，Z轴好理解，就在中间对吧？就在中间Z轴旋转，当然我们除了这个的话，我们还可以写一个什么呢？写一个那个叫做turn tu是吧？TURN1TURN就什么呀，一圈啊一特就一圈跟三百六是一样的，你也可以写什么呢？可以写一个点5TURN，点5TURN那就是一个什么呀，有一个半圈呗，哎半圈那就跟那个一百八是一样的，对吧，半圈一百八是一样的，也就是你也可以写什么点点二五，哎点五那就应该跟那个90是一样的，对吧？哎，这么一个效果turn表示圈，之前我们也提到过这问题啊，带turn都行，然后这里边是我们说的一个Z轴旋转，我们再说一个什么呢？哎，我们这个X轴Y轴什么效果transform其实一看就明白了啊，诶叫做rotate，我们来XX我们来一个什么呢？来一个45度，45带个X轴跟哪呢？X轴跟哪呢？注意了X轴X轴是不是水平方向，水平方向是不是也就是这个方向，哎，这个方向去转，那这个时。

就是它沿着这个轴转的话，那它是不是应该上下去动了，哎，上下去动了，所以这时候来看效果，哎，你看是不是它就往后去仰了啊，他就往后去仰了，等于是45度啊，往后仰了45度，我还可以写什么呢？可以写个90，哎90那你就想象成什么效果了，就变成一个什么了，是变成一平面了啊，就变成一个平面了，是这么一个效果啊，当然能有这个效果，前提是我们这设置了perspective，如果你没设置这个视距，你不设置它，你看啊，它没有近大远小的效果，我们先先设置小一点，你会发现什么呢？你看它好像也转了，但是它你看。

它更像是抽抽了高度变高度变矮了，你看不出一个旋转的效果，因为没有视距嘛，但是有了视距以后，其实你会发现什么呢？我这设置完了以后，它不仅是高度变短了，它上边这是不是也变窄了呀？哎，就会有那么一个透视的一个效果啊，透视的效果好，这是X啊，你这写一个这个45度，那这个时候90度那就没了，对吧，Y也是一样，Y呢，就是就是竖着转了呗，哎，竖着转了对吧，Y轴就是竖着转了啊，是这么一个效果啊，这么一个效果竖着转了好那这里边我们要注意一个问题，就是我们刚才提到那个问题，现在我设置一个Y轴旋转45度，它是这么一个效果吧，哎，这么一个效果，然后呢，我再让它啊直接空格，我们让它沿着Z轴再移动100个像素，那这个时候还跟刚才那一不一样了，就不一样了，那这个时候我外轴转完了以后，我这轴的方向是不是也变了，所以这时候你看效果啊，它是往哪移了，它是不是就往这个。

去移了，哎，往这个方向移了，如果我Y轴是负45度，那它就往。往左移了，懂这意思吧，所以注意这个视视角它是会转的啊，会转的，所以现在它冲这个方向了，这轴就等于就冲这儿了，再移就往这移了，就不是往我们脸上砸了，它是不是就就斜着了，哎就斜着了，如果你外轴你直接给他转一个360，你转了一个三百六的话，等于我们这个元素是不是背面冲我们呀，哎，背面冲着我们。啊，别360，三百六转回来了，对吧，我们应该是转一个180，一百八背面冲着我们这个时候你看他是不就往往后移了，哎，他就往就往后移了啊，所以注意这个方向它是会它是会变的啊，它是会变的，所以这里边一定要注意，并且你写的时候你要注意顺序，现在我先写的是什么呀？我先写的是穿rotate，我先转的，那我如果先移呢。

我先沿着Z轴平移，然后再转，我们来看现在是一个什么呀，是一个这样的效果，你看现在比较大吧，如果我先后转再移。是就比较小啊，所以它们是有区别的啊，我把Y写前边，把Y写前边，它会旋转，然后再移这个，所以这个东西是离我们越来越远了，而如果我把它写前边，它是先移，先向我们移近了100像素，然后再转，所以它实际上离我们的距离是没保存啊，保存一下实际上离我们的距离它不会远，它会近，懂这意思吧，你当然这儿写100不明显，我们写大点，我写一个400，我写个400这一保存，你看啊，它是往我们这边转的，哎，往我们这边这边转的，而我先平移，先转再平移是往往后转的，哎，往后转的啊，所以注意它的一个区别啊，它一个区别，所以其实看到这儿你也会发现这个东西。

旋转了以后是不是会有一些，哎，特别好的效果，对吧，特别好的效果，然后正好我们再说一下这个东西，再说下什么呢？我们这个transform transform以后的话，我们这是一个叫做一个rotate rotate，一个这个rotate，一个这个YY来一个180度，180度的效果，就是正好我们这个元素是不是就是背面冲着了，哎，那这一块效果可能不明显，我们这有一个图片安点DBG。我就直接拖过来。放到这里边，哎，我把它呢设我把它里边啊设一个图片，这图片多大格，我看看图片是一个三百二乘以320，我们直接设置一个，我们直接来一个img，来一个in，点一个GPG n.GPG呢，我们这来看效果，现在设置好了一个图片是吧，图片应该是溢出了，应该是一个三百二像素，然后这乘以一个三百二是不是大一点是吧？然后现在我们再转一百八啊，你会发现是不是等于哎我把这个图就给颠倒过来了，哎等于现在我们看到的是图片的一个什么一个背面，你看这整个人脸是不是都都扭过来了，哎，都扭过来了啊，所以它这个旋转也是会有一个透视效果啊，也是会有一个透视效果，但是我们看看，如果我不写这个探视效果。

诶，它也能转，但是转的过程当中呢，还是就没有那个近大圆小那个效果啊，所以你要是想做这个3D效果，这perspective一定得写上啊，你定写上，然后这我们还有一个值，我们看看这有没有叫做一个back face visibility back face back face叫什么呀？叫背面，背面visibility visibility叫什么呀，显示那这个样是什么呢？这是设置我们这个元素的这个背面什么呀。哎，是否显示什么呢？显示我们元素的背面，背面背面就是旋转完了，旋转180度不就背面了吗？对吧？默认值呢，是那个visible啊，Visible这时候是显示的对吧？你可以看到的背面，但是如果你这设置是一个黑的，黑的的话，就是隐藏，你转完了以后就看不见，因为转完就没了嘛，哎，背面就一个隐藏那么个效果，那这个东西呢，你可以在这设置，你在这儿设置的话呢，就就就干脆就看不见，对吧，你转完了。

不就没有了啊，就看不见背面了啊，所以这个呢，也可以看，根据情况这样去使用，比如说你想做一个牌是吧，做一个牌前面是一大佬K，后边是一个背景，你转完了以后，你希望看到那个背景，你可以把两个图片给压到一起啊，给加到一起，这里边我们就不展示了啊，所以这个是设置我们背面的显示的跟那个visibility很像，也是两个值，一个是visible，还有一个是hidden visible表示显示，Hidden表示顶层啊好，这个旋转说完停一下。