尚硅谷前端基础 (121)

好，这个X轴Y轴的平移，我们说完了，然后我们再说一个这个Z轴的平移啊，在这我们直接来说一下我们0405，呃，我们这个这轴的平移，这轴平移的话，其实你有时候看出来看的时候它你会感觉不是那么明显啊，我们来说一下为什么不明显啊，我们来写一个点一个BOX1，然后呢，在这儿我们来写样式啊，Style标签，这直接来一个点一个BOX1，来一个200 hi来一个200，然后background background，我们来一个井号，一个B啊然后呢，我们给它设置一个margin margin的话，我们来一个一百二百像素吧，200像素，然后来一个凹凸a to a to啊然后在这我们来打开它，诶是这么一个小块，那所谓的Z轴平移是什么？我们说了还是你要把你的手指举起来，Z轴，也就是我们那个中指对吧，冲着你那个，也就是你就想象着屏幕有。

的箭冲你扎过来了，那这个时候Z轴的数，Z轴所谓的轴平移，其实就是在调整什么呢？在调整Z轴平移就是调整我们这个元素在我们的这个轴的什么呀，Z轴的一个位置啊，元素在这Z轴的一个位置，那注意了，正常情况下，正常情况下就是什么呢？就是调整我们这个元素和我们这个人眼眼睛，哎眼之间的一个距离啊，元素和我们这个人眼之间的一个距离，什么意思啊，什么意思Z轴和我们人眼之间距离，也就是说正常情况下，什么叫正常情况下，现在我们这个元素是不是冲着我们呀，所以这个时候是正常情况下，现在这轴是朝着我们的，但是我们往后会说，我们可以去旋转元素，你旋转完了，那么对不起，它就不一定是冲着你的了，懂这意思吧，现在是冲着我们的。所以正常情况下我们。

调整这轴就是调整我们这个元素和我们之间之间距离，我们这个距离越大，距离越我们这个元素什么呢？哎，离我们这个人越近，距离越大，离我们这个人越近，所以我们来看效果啊，我们在这儿还是T，这里面我们直接Z，比如说我来一个100个像素，那它那么它的意思就表示什么呢？这个元素。离我们人近100像素，那我们这儿是不是应该看到一个元素，应该。往外突出了一个效果呀，哎，就好变大了吗？近大远小，它离我们近了以后，它是不是应该变大呀，但是其实你看我写完了以后，你这刷新有没有任何变化啊，没有任何变化，你用translateatorxx还会有一个变化呢，对吧？诶，但是Z的话，你发现没有任何变化，元素一点都没改变，你写上它跟不写它有没有区别，没有区别啊，没有区别，为什么啊，这边我们来说一下，由于Z轴的效果呀，它属于一种立体效果，我们这个Z轴的平移。

它属于什么呢？属于这种立体效果，立体效果，但是目立体效果主要就涉及到这么一个问题，就是我们这个近大远小，近大远小就有立体了，对吧，近大远小，但是这里边注意默认情况下，呃，默认情况下我们的什么呢？我们的网页是不支持透视的，是不支持透视的，这有点像什么呀，有点像我们中国过去那种国画，还有我们先这种西方的作品一样，你看西方的这种画，哎，你画个什么蒙德丽莎是吧，都是近大远小啊，近大远小这么一个效果，而我们中国的国画就是什么呢？哎，就是都一边大是吧，你这这一人那一山是吧，他画的比例都是一样，他不会说涉及到这东西，离我远我就画的小一点，离我近我就画大一点，他都是一边大，他没有这个近大影小这个概念，那现在我们这个网页里边默认情况下，就跟我们中国国画一样，它没有近大元小的概念，所以现在说了，诶我这块川四类的Z，我设置了100像素，你这块应该离这个人。

100个像素啊，诶注意现在没有透视，在现在的网页中，他认为什么，他认为说元素离我们人远还是离我们人近，它的大小是一样的，大小不变，哎，你离得近它是200乘200，离离远还是200乘200，所以没有开启都是，所以如果我们需要看见这个效果，我们必须什么呢？诶必须要设置我们这个网页的一个什么呢？视距，视距啊叫一个视距，也就是说你要给他预设一个值啊，设置一个值，也就说你要默认一下，现在我们默认情况下，我这个眼睛和这个元素之间的距离，或者和网页之间的距离，这个值一般我们都直接设置给HTML表情啊，我们这个值叫做一个prope啊，Prope这个值呢，一般不宜过小，一般我们怎么着也600像素起是吧，我习惯用800像素，一般800到一千二都没啥问题。

是吧，那现在我这个perspective就是设置的设距，设置什么呢？设置我们当前网页的一个视距，为什么呢？为800像素，它的意思就是我们人眼距离，我们这什么呢？元素或者距离我们这个网页的一个距离，那么OK，现在我的人眼距离这个网页的距离就是一个什么，就是一个800像素啊，就是一个800像素，也就是说现在这个Z轴的长度就是800，这个从屏幕里杵了除了一根箭了，这根箭现在杵着我的脑门了，那这根箭从我脑门到屏幕的距离是一个800像素，你不用真两去啊，不用真两节是他设计的啊这么一个值，但是你可以写多大都行啊，写多大行，但是不要太小啊，尽量是呃，600到一千二之间啊，但是800~1200 600~1200，一般我习惯用800或者1000啊，然后这里边的话，这个时候我再设置穿刺雷的Z，那这个时候等于这种有距离的，你看效果啊，我这一移动。

这个值是不是变大了，哎，变大了，这你看不明显啊，看不明显，这样我给body啊弄1HO Bo ho以后我来改变一下BOX1的样式，这时候再改变，你说我鼠标移动的时候再改变，然后呢，哎，别忘了把那个穿加上，我们要看一下它的一个变化的一过程，T transition，我们来设置一个所有的属性吧，我就不设置了啊，两秒这一保存看效果啊，现在我们刷新一下，现在我只要移入这窗口。哎，没有。哎奇，现在很奇怪一个事儿，现在我移入以后是不是没有，哎啊现在包在这呢是吧，包这这这这还不是包，那这里边包太小了，包太小了，我把包的话包我给它设置一下吧，呃，包的话我们还是background color，我给它设置一个颜色silver silver呢还是比较比较深一点是吧？哎，就这样吧，呃，到时你设置颜色你看不出来，因为包的颜的背景颜色正好说到这儿我提到一个问题，包Y的背景颜色默认情况下，它直它实际上你设置完这个背景颜色，它实际上不是给包Y了，它实际上直接就给S毛设置的啊，所以你看不见包Y的真实大小的，真实大小多大个呢？我们需要通过Bo来看，我们一个像素red来一个solid的真实大小，我们来看真实大小，只在这一个范围啊，只在这个范围，这是我们Bo的范围啊，那好，我们在这儿，现在就看效果吧，我一路走。

哎，是不是就可以变大了，哎，你看到是不是明显感觉到这个东西变大了，哎，为什么变大了，它没有变大，它只是离我们近了啊，我改一个200像素，改一个200像素，那这个时候这个值会更大，不是大了啊，还是不是大了，它是离我们近了，如果你是写一个200，那这个时候它就会干嘛呢？

它会小了，也不是小了，它是离我们远了啊，离我们远了，所以这个值越大，它离我们就越近，那比如说我写一个600，我写一个600，那它就干嘛了，哎，就更大了，那就更大了，但是我如果写一个800呢，写个800注意了，我们本来距离是就800啊，然后他又往前移动800，那现在是不是等于这玩意儿就贴脸了，贴脸什么效果，贴脸就把浏览器满了。懂这意思吧，哎，这就是我们的一个近大远小的那么一个效果啊，通过它你就可以看到这个这个这个特点啊，它是根据我们这个这其实这就等于是有一个有一个这种。3D的效果了啊，3D效果了啊，那这个是我们的一个叫做一个translate z，但是注意啊，但是注意现在我们之所以能这么写的前提是之所以现在我们看到这个块儿是冲我们飞过来的，前提是我们现在没有对这个元素做旋转，没有旋转，如果做了旋转以后，那注意那我可能这轴现在是冲冲着我们的，对吧，有可能我旋转完了以后，这轴是朝这个方向，朝这个方向，那这轴就往那儿移了，所以我们这儿说什么水平啊，说什么这个垂直啊，都是说它没旋转的情况下，它旋转了以后，就像我们这手指头，你把那个左手法则你再摆出来是吧，现在中指冲着你食指冲天，然后我们这个大拇指冲左，那这个时候我现在是没转的情况下，但是当我转了以后，比如说我向左转一下，或者我向右转一下，转完了以后，我们这个中指是不是冲外边了，那这个时候它再移就。

换个方向移了啊，一定要注意Z轴的方向，它是沿着Z轴移的，现在Z轴冲着我们，但是不是说它所有时候都会冲着我们啊，好，这个是我们说一个Z轴的一个平移川四类的一个Z啊来停一下。