CSS3-3D技术

2019-02-15 本文已影响27人 riverhh

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>