特点
近大远小
物体后面遮挡不可见
三维坐标系
x,y,z 三个值
x 越往右越大 越往左越小
y 越往下越大,越往上越小
z 越往外面越大 越往里面越小 后面的单位一般用px
perspective透视也叫视距
如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
模拟人类的视觉位置,可认为安排一只眼睛去看
透视越大,距离屏幕越近,成像越大。透视越小,距离屏幕越远,成像越小
透视的单位的像素
透视写在被观察的元素的父亲里面
**透视越小,物体越大。
如果想要网页有3D效果,必须得加透视
translateZ
z轴,物体距离屏幕的距离,z轴越大,我们看到的物体越大。
给父亲一个perspective,给盒子们不同的z,会实现不同的效果
3D旋转(遵循左手法则,大拇指为坐标轴,四个手指弯曲的方向为图片翻转的方向)
X轴:正值 向后翻转 负值 向前翻转
transform: rotate3d(x,y,z,deg);
transform:rotate3d(1,0,0,45deg);
img:hover {
transform: rotate3d(1,1,0,180deg);
}
当存在多个1时,用矢量法。
类似下图:
3D呈现 transform-style
控制子元素是否开启三维立体环境
transform-style: preserve-3d;
代码写给父级,但是影响的是子盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/*开启3D空间*/
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>