D转换之位移(translate)、透视(perspective)和旋转(rotate)，你了解了嘛？
🌵🌵🌴三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴:水平向右 注意:×右边是正值，左边是负值
- y轴:垂直向下 注意:y下面是正值，上面是负值
- z轴:垂直屏幕 注意:往外面是正值，往里面是负值
🌵🌵🌴3D移动 translate
语法格式：
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
transform: translate3d(x,y,z);
基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
/*transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px) ;*/
transform: translateX(100px) translateY(100px) translateZ(100px);
/*1.translateZ 沿着Z轴移动*/
/*2.translateZ 后面的单位我们一般跟px*/
/*3.translateZ(100px) 向外移动100px （向我们的眼睛来移动的）*/
/*4.3D移动有简写的方法*/
/*transform: translate3d(x,y,z);*/
transform: translate3d(100px,100px,100px);
/*xyz是不能省略的，如果没有就写0*/
transform: translate3d(0,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
🌵🌵🌴透视 perspective
-
透视写在被观察元素的父盒子上面的
-
透视的单位是像素（当数值为正数，透视的值越大，看到的物体越小）
-
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
-
z∶就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
语法格式：
perspective: 200px;
基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
/*透视写在被观察的元素的父盒子上面*/
perspective: 200px;
}
div {
width: 100px;
height: 100px;
background-color: pink;
transform: translate3d(400px,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
translateZ()基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"
最低0.47元/天 解锁文章
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
