css3的坐标轴是相对于电脑屏幕还是物体自身？

今天跟着老师做 “旋转木马” 案例，想了好久一直想不明白，为什么每张图片的translateZ的值都相等，都是translateZ(300px)。

因为我理解的 Z轴就是垂直屏幕呀。

经查阅，一语惊醒梦中人：

于是我就想做个小实验来确定，坐标轴X轴、Y轴和Z轴到底是相对于电脑屏幕还是物体自身？

实验思路：

在页面准备两个相同大小的盒子，第1个盒子，让它先沿X轴移动300px，再旋转45°。第2个盒子，让它先旋转45°，再沿X轴移动300px。

结果如下：

由此看出，css3的坐标轴X轴、Y轴和Z轴是相对于物体本身的。我也明白了为什么老师做旋转木马时给每个图片的translateZ的值都相等了。

测试代码附上：是鼠标放到盒子1与盒子2上才看效果奥。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>试验css3的坐标轴是相对于电脑屏幕还是物体自身？</title><style>* {margin: 0;padding: 0;}body {position: relative;}.box1,.box2 {width: 100px;height: 100px;position: absolute;left: 100px;}.box1 {top: 30px;border: 1px solid pink;}.box2 {top: 160px;border: 1px solid purple;}.div1,.div2 {width: 100%;height: 100%;}.div1 {/* 先移动，后旋转 */background-color: pink;/* transform: translateX(300px) rotate(45deg); */transition: all 3s;}.div2 {/* 先旋转，后移动 */background-color: purple;/* transform: rotate(45deg) translateX(300px); */transition: all 3s;}.div1:hover {transform: translateX(300px) rotate(45deg);}.div2:hover {transform: rotate(45deg) translateX(300px);}</style></head><body><div class="box1"><div class="div1">先移动，后旋转</div></div><div class="box2"><div class="div2">先旋转，后移动</div></div></body>
</html>

参考资料：https://blog.csdn.net/kbx8916/article/details/68064792?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase

css3的坐标轴是相对于电脑屏幕还是物体自身？相关推荐

html网页大小自动调整大小,根据电脑屏幕分辩率大小自动调整网页宽度
目前,电脑显示器主要为液晶显示器,它们的屏幕大小参差不齐,分辨率自然也大小不一,从面导致同一大小的网页在不同分辨率的电脑显示千差万别,可能有的显示正常,有的显示乱.这就要求在设计网页时处理好这个问题, ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
怎么看电脑屏幕尺寸_经常面对电脑怎么护眼？电脑族怎么保养身体？
上班族眼干涩不舒,甚至畏光.这种症状时有发生.长时间"聚精会神.目不转睛"对眼睛的危害是极大的.护眼就是要预防或消除这种情况,日常应注意对眼睛的呵护,护眼关键是要持之以恒.那么,经 ...
平板电脑怎么投屏到电视上_电脑屏幕投屏到平板、IPAD、艾派德
电脑屏幕投屏到平板电脑屏幕投屏到平板有两种投屏方式,一种是电脑屏幕直接投屏到平板上,另一种是电脑屏幕投屏到大屏幕的同时,二次投屏到平板上. 电脑直接投屏到平板,平板可以直接书写批注等各种操作能够反控 ...
台式计算机桌面待机时间怎么调,如何设置电脑屏幕待机时间
如何设置电脑屏幕待机时间以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 如何设置电脑屏幕待机时间你好,不知道你用的什么 ...
vi 从第几行到第几行替换_第三十三章：查找新函数：XLOOKUP，再也不用趴着电脑屏幕数第几列、第几行（二）...
XLOOKUP查询函数的语法XLOOKUP(lookup_value,lookup_array,return_array,if_not_found,match_mode,search_mode) 第一 ...
一个抓取电脑屏幕的小控件台程序
一个抓取电脑屏幕的小控件台程序 using System; using System.Collections.Generic; using System.Linq; using System.Text ...
计算机无法屏幕亮度,电脑屏幕亮度无法调节怎么办
Win10系统电脑屏幕亮度无法调节的解决方法.本方法适用于屏幕亮度无法调节,或者调节之后屏幕亮度无变化的问题.那么,Win10屏幕亮度无法调节该怎么办?一起来了解一下吧! Win10屏幕亮度无法调节具 ...
电脑屏幕保护怎么取消_怎么监控员工电脑？老板如何知道员工上班在干什么？...
网络是一把双刃剑使得员工轻易被其他无关工作的网页所吸引,影响工作泄露公司机密:根据IDC统计,54%的员工在工作时浏览过工作无关的网站甚至包含赌博网站,70%的安全损失是由企业内部员工的不规范上网造成 ...

css3的坐标轴是相对于电脑屏幕还是物体自身？

css3的坐标轴是相对于电脑屏幕还是物体自身？相关推荐

最新文章

热门文章