3D特点 近大远小 物体后面遮挡不可见
三维坐标系 x轴：水平向右 右边是正值，左边是负值 y轴：垂直向下 下面是正值，上面是负值 z轴：垂直屏幕 往外面是正值，往里面是负值 如下图： 不过在我们css中y轴向上是为负的，y轴向下为正，与下图相反
css3中的3D转换
- 3D位移 translate3d(xyz)
- 3D旋转 rotate3d(xyz)
- 透视：perspective
- 3d呈现transform-style
** 3d位移**
代码语言：javascript复制transform:translateZ(100px)沿着z轴移动（px）
transform:translate3d(x,y,z)分别的轴方向距离如下例
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.map{
width: 100px;
height: 100px;
background-color: red;
margin:100px auto;
transform: translate3d(100px,100px,100px);
/* x轴移动右边100px */
/* y轴向下移动100px */
/* z轴向外面移动100px */
}
</style>
</head>
<body>
<div class="map"></div>
</body>
</html>
可以看到盒子并没有什么变化，不是用了3d吗？ 透视 这里我们得借助透视(perspective),通过透视可以使我们的网页展现3d效果。
- 透视模拟人视觉的位置
- 透视也称为视距指的是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
借上图理解透视 一般情况“眼睛”看到的物体比“眼睛二”小，这是因为视距的带来的近大远小的问题，当人的眼睛离屏幕越近时他看到的物体越大，相反他看到的物体越小，这个人眼睛到屏幕的距离就称之为视距。 而z就是css中的translateZ也就是z轴物体离屏幕的距离，这个值越大看到的物体越大，值小看到的物体越小
了解上面的透视和translateZ之后我们就可以给我们的案例加上透视效果了 不过需要注意的是透视是写在被观察元素的父盒子上面的，说白了就是当子元素要实现3d效果那么应该在父元素上设置相应的透视
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
perspective: 200px;
}
.map{
width: 100px;
height: 100px;
background-color: red;
margin:100px auto;
transform: translate3d(100px,100px,100px);
/* x轴移动右边100px */
/* y轴向下移动100px */
/* z轴向外面移动100px */
}
</style>
</head>
<body>
<div class="map">
</div>
</body>
</html>
可以看到加了透视后，我们的元素比之前大了
上面提到translateZ和perspective都可以实现近大远小的效果，我们会想他两不是一样的吗？ 其实不然，perspective指的是我们观察物体的距离 如果我们body有三个元素，并且在视距相同的情况下，此时元素大小是相同的，如果我们设置每个元素不同的translateZ,这样我们看到的每个元素就会不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
perspective: 200px;
}
.map,.map2{
width: 100px;
height: 100px;
background-color: red;
margin:100px auto;
transform: translate3d(100px,100px,100px);
/* x轴移动右边100px */
/* y轴向下移动100px */
/* z轴向外面移动100px */
}
.map2{
transform: translate3d(100px,100px,50px);
background-color: blue;
}
</style>
</head>
<body>
<div class="map">
</div>
<div class="map2">
2
</div>
</body>
</html>
这里看不出来什么惊艳的效果，但基于这个特性我们可以实现很多有趣的东西如3d相册就是利用了这一特性
3d旋转 指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
- transform:rotateX()
- rotateY()
- rotateZ
- rotaet3d(x,y,z,deg)
1.rotateX()使元素沿x轴旋转
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
perspective: 200px;
}
img{
display: block;
margin: 100px auto;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<img src='./media.jpg'>
</body>
</html>可以看到图片沿着x轴正方向旋转了45度，只所以有3d效果是因为我们加了透视实现了近大远小的效果
rotateY示例
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
perspective: 200px;
}
img{
display: block;
margin: 100px auto;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<img src='./media.jpg'>
</body>
</html>
rotateZ
这里rotateZ其实与我们的2d旋转是一样的，因为z轴是眼睛到屏幕的垂直距离，z轴就是居于这个距离旋转，所以看到的是平面旋转
代码语言：javascript复制 img{
display: block;
margin: 100px auto;
transform: rotateY(45deg);
}
transform-style 控制子元素是否开启三维立体环境
- transform-style:flat子元素不开启3d立体空间（默认）
- transform-style:preserve-3d:子元素开启立体空间
- 这个属性需在父盒子指定
它有什么用？ 如下实现这种效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
perspective: 200px;
}
.box{
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(45deg);
}
.son1,.son2{
position: absolute;
top:0;
width: 100%;
height: 100%;
background-color: red;
}
.son2{
background-color: aqua;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>如果这里没有使用transform-style: preserve-3d那看到的效果是这样的
