我们生活的环境是3D,照片就是3D物体在2D平面呈现的例子。
三维坐标系:就是指立体空间,立体空间是由3个轴共同组成的。
· x轴:水平向右 注意:x右边是正值,左边是负值
· y轴:垂直向下 注意:y下面是正值,上面是负值
· z轴:垂直屏幕 注意:往外面是正值,往里面是负值
3D转换
3D转换我们主要学习工作中最常用的3D位移和3D旋转
1.3D位移
2. 3D旋转 rotate 3d
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。
语法:
· transform: rotateX(45deg):沿着x轴正方向旋转45度
· transform: rotateY(45deg):沿着y轴正方向旋转45deg
· transform: rotateZ(45deg):沿着z轴正方向旋转45deg
· transform: rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)
3. 透视:perspective
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(400px, 100px, 200px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4. 3D呈现transform-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa{
position: relative;
width: 150px;
height: 150px;
margin: 100px auto;
perspective: 200px;
transform-style: preserve-3d;
}
.box1{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: palevioletred;
}
.box2{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: powderblue;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="fa">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
两面翻转的盒子 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .4s;
/* 让背面的紫色盒子保留立体空间 给父级添加的 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">我是前</div>
<div class="back">我是后</div>
</div>
</body>
</html>