CSS3-3D技术（逆战班）

最新推荐文章于 2023-05-19 10:28:09 发布

周广阳

最新推荐文章于 2023-05-19 10:28:09 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/ZhouGYx/article/details/104449349

版权

	CSS-3D技术顾名思义，就是可以实现3D效果的技术，这项技术在前端开发中有着广泛的应用。想要展示3D效果，就需要有3D空间，我们一般用3D坐标系来作为参考，但是CSS3中的3D坐标与一般的3D坐标有一点区别，相当于其绕着X轴旋转了180度；x轴左边是负的，右边是正的，y轴 上面是负的， 下面是正的，z 轴里面是负的， 外面是正的。
	
	下面是CSS3-3D技术的几种属性：
	perspective（透视）;电脑屏幕呈现的是2D的平面，图像之所以具有立体感，其实是一种视觉的呈现，而通过perspective属性就可以做到；一般设置给父元素，可以作用于所有3D转换的子元素，透视的特点为近大远小。
	translate（移动）;translate3d(x,y,z),其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值.
	rotate(旋转)；rotateX(xxdeg) : 就是沿着 x 立体旋转；rotateY(xxdeg)：沿着y轴进行旋转rotateZ(xxdeg)：沿着z轴进行旋转；注：“xx”为旋转的度数，“deg”为角度单位“度”。

开门案例：
在这里插入图片描述

<!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>