3D转换1111

2024-03-31 11:12

文章标签 3d 转换 1111

本文主要是介绍3D转换1111，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.三维坐标系

1.3D位移: translate3d(x,y,z)



translform:translateX(100px)：仅仅是在x轴上移动



translform:translateY(100px)：仅仅是在Y轴上移动



translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）



transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

2.3D旋转: rotate3d(x,y,z)

transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度（了解即可）

xyz 是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。



transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg



transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

3.透视: perspective

4.3D呈现 transfrom-style

3D呈现 transfrom-style



控制子元素是否开启三维立体环境。。



transform-style: flat 子元素不开启3d立体空间默认的



transform-style: preserve-3d; 子元素开启立体空间



代码写给父级，但是影响的是子盒子



这个属性很重要，后面必用

案例：3D导航栏（盒子翻转）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li{float: left;margin: 0 5px;list-style: none;width: 120px;height: 35px;perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .4s;}.box:hover{transform: rotateX(90deg);}.front,.bottom {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;/* 先移动后旋转 */transform: translateY(17.5px) rotateX(-90deg);}</style>
</head>
<body><ul><li><div class="box"><div class="front">前途似海</div><div class="bottom">来日方长</div></div></li><li><div class="box"><div class="front">前途似海</div><div class="bottom">来日方长</div></div></li><li><div class="box"><div class="front">前途似海</div><div class="bottom">来日方长</div></div></li><li><div class="box"><div class="front">前途似海</div><div class="bottom">来日方长</div></div></li><li><div class="box"><div class="front">前途似海</div><div class="bottom">来日方长</div></div></li></ul>
</body>
</html>