CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图
3D坐标系.png
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
rotate
rotateX() : 就是沿着 x 立体旋转.
rotateY()：沿着y轴进行旋转
rotateZ()�：沿着z轴进行旋转
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
透视.png
移动translate
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
开门案例
开门.gif
<!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>开门大吉</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/3.jpg) no-repeat;
position: relative;
perspective: 1000px; /*给父盒子增加透视*/
}
.door-left,.door-right {
position: absolute;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*连个门都是过渡*/
}
.door-left {
left: 0;
border-right: 1px solid #000;
transform-origin:left; /*旋转中心点*/
}
.door-right {
right: 0;
border-left: 1px solid #000;
transform-origin:right; /*旋转中心点*/
}
.door-left::after,
.door-right::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); /*自己高度的一半*/
}
.door-left::after {
right: 5px;
}
.door-right::after {
left: 5px;
}
/* 鼠标经过section，两个门进行翻转 */
section:hover .door-right {
transform: rotateY(130deg);
}
section:hover .door-left {
transform: rotateY(-130deg);
}
</style>
</head>
<body>
<section>
<div class="door-left"></div>
<div class="door-right"></div>
</section>
</body>
</html>
backface-visibility
两面翻转的盒子
翻转.gif
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
/*transform-style: preserve-3d;*/
/* 1.保留当前空间位置
2.是图片扁平化*/
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 8s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面对向屏幕，就隐藏*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="images/qian.svg" alt=""/>
<img src="images/hou.svg" alt=""/>
</div>
</body>
</html>
网友评论