css33d坐标系,CSS3-3D技术

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

开门大吉

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);

}

backface-visibility

两面翻转的盒子

翻转.gif

Document

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);

}