3D转换
从数学的角度上来说，我们是只有x轴和y轴的，而立体空间上则多了一个z轴，如下
x轴：垂直向右 右为正值，左为负值
y轴：垂直向下 下面为正值，上面为负值
z轴：垂直屏幕 往外为正，往内为负
3D主要用位移，旋转，透视和呈现
3D位移:
translate3d（x，y，z）
3D旋转:
rotate3d（x,y,z）
透视:
perspective
3D呈现:
transfrom-style
在css中，这种写法只能跟随一种轴:
transform:translateX（100px）;
transform:translateY（100px）;
transform:translateZ（100px）;
而它可以简写为：
transfrom:translate3d（x,z,y）
这个3d是必不可少的，且xyz轴是不能省略的，可以写0值
3D里面的透视简单理解就是近大远小，值越大，元素越大，但是透视很重要，想实现3d效果，就必须要加透视
3D旋转
使元素沿着xyz三个轴进行旋转
语法
transform:rotateX()
transform:rotateY()
transform:rotateZ()
3D呈现
transform-style:flat;默认不开启3d立体空间
transform-style:preserve-3d;子元素开启立体空间
这句代码是写给父元素，原来影响子元素的，很重要
如果要查看鼠标的坐标，可以参考w3school的实例，如下
<html>
<head>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</html>
__EOF__
本文链接：https://www.cnblogs.com/wencaiguagua/p/14333015.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）