3D转换
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
x轴:水平向右 注意: x 右边是正值,左边是负值
y轴:垂直向下 注意: y 下面是正值,上面是负值
z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
一:3D位移:translate3d(x,y,z);
/* 沿X轴移动 */
transform: translateX(px / %);
/* 沿Y轴移动 */
transform: translateY(px / %);
/* 沿Z轴移动 */
transform: translateZ(px / %);
- 考虑层叠性,不可以几个连起来写。
- 借助透视
二:透视(视距,景深):perspective
1、设置用户眼睛和标签的原始距离
2、写在被观察元素的上层标签上
✿ 默认眼睛观察物体的位置,在设置perspective的盒子的正中心
✿ 透视原点(视距原点):perspective-origin(了解)
1、设置用户眼睛观察物体的位置
2、浏览器默认观察位置是从设置perspective盒子的正中心来观察标签
✿ 注意:
尽量把被观察标签放在设置perspective盒子的正中心
值越大,透视越大。值越小,透视越小。
三:3D旋转
/* 绕着X轴旋转 */
transform: rotateX();
/* 绕着Y轴旋转 */
transform: rotateY();
/* 绕着Z轴旋转 */
transform: rotateZ();
正方向-左手法则:
左手握着旋转轴,大拇指指向旋转轴正方向,四根手指弯曲的方向就是该轴旋转的正方向
✿ 开启3D空间:transform-style:preserve-3d 让子盒子保持3D转换状态
属性 | 描述 |
---|---|
flat | 不开启,默认 |
preserve-3d | 开启 |
✿ 注意:
标签做3D转换(位移、旋转),把transform-style:preserve-3d加到父标签上
✿ 某个盒子做3D转换时:
1、给上层盒子设置perspective,设置眼睛和屏幕的距离,实现近大远小的效果
2、给父盒子设置transform-style:preserve-3d,开启3D空间
四、浏览器前缀(了解):
火狐: -moz-
chrome:-webkit-
IE:-ms-
opera:-o-
案例:做一个3D导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航栏</title>
<style>
ul {
margin: 100px auto;
}
ul li {
float: left;
margin-right: 5px;
/* 透视 */
perspective: 20000px;
/* 去掉li的样式 */
list-style: none;
}
.box {
position: relative;
/* 盒子的大小 */
width: 120px;
height: 40px;
/* 开启3d空间 */
transform-style: preserve-3d;
/* 过渡 */
transition: all .4s linear;
/* 文字居中 */
text-align: center;
line-height: 40px;
/* 文字样式 */
color: #fff;
font-size: 20px;
}
/* 点击box时发生的样子 */
.box:hover {
transform: rotateX(90deg);
}
/* 两个盒子的公有样式 */
.behand,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.behand {
background-color: blueviolet;
/* 沿着z轴前进20px */
transform: translateZ(20px);
}
.bottom {
background-color: black;
/* 沿着y轴正方向移动20px,再沿着x轴反方向旋转90度 */
transform: translateY(20px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="behand">
首页
</div>
<div class="bottom">
Z
</div>
</div>
</li>
<li>
<div class="box">
<div class="behand">
轻松一刻
</div>
<div class="bottom">
J
</div>
</div>
</li>
<li>
<div class="box">
<div class="behand">
产品信息
</div>
<div class="bottom">
Z
</div>
</div>
</li>
<li>
<div class="box">
<div class="behand">
常见问题
</div>
<div class="bottom">
H
</div>
</div>
</li>
<li>
<div class="box">
<div class="behand">
联系我们
</div>
<div class="bottom">
K
</div>
</div>
</li>
</ul>
</body>
</html>
- 运行截图