css3D转换

最新推荐文章于 2024-10-31 15:47:09 发布

热身就犯困

最新推荐文章于 2024-10-31 15:47:09 发布

阅读量47

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_73805336/article/details/130915441

版权

文章详细介绍了CSS3中的3D转换特性，包括3D坐标系、3D位移（translate3d）、3D透视（perspective）、3D旋转（rotate）以及3D呈现（transform-style）。通过实例展示了如何创建3D效果，如翻转盒子和3D导航栏等。

摘要由CSDN通过智能技术生成

1、 3D转换

特点：近大远小，物体后面遮挡不可见

1.1三维坐标系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LABwXCrY-1685267969229)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230524162447.jpg)]

1.2 3D位移

translate3d（x，y，z）；

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transform: translateX(100px) translateY(100px) translateZ(100px);
            /* 1.translateZ 沿z轴移动 */
            /* 2.translateZ 后面的单位一般跟px */
            /* 3.translateZ(100px)  向外移动100px */
            /* 4.3D移动有简写 */
            transform: translate3d(100px, 100px, 100px);
            /* 5.里面的x，y，z是不能省略的，没有写0 */
        }
    </style>
</head>
<body>
    <div></div>
</body>

1.3 3D透视 perspective

透视就是让网页产生3D效果

透视也称为视距：就是人眼到屏幕的距离

距离视觉点越近在电脑上成像越大

透视的单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

 <style>
        body {
            /* 透视写到被观察元素的父盒子里面 */
            perspective: 200px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1.translateZ 沿z轴移动 */
            /* 2.translateZ 后面的单位一般跟px */
            /* 3.translateZ(100px)  向外移动100px */
            /* 4.3D移动有简写 */
            transform: translate3d(400px, 100px, 100px);
            /* 5.里面的x，y，z是不能省略的，没有写0 */
        }
    </style>
</head>
<body>
    <div></div>
</body>

1.4 3D旋转 rotate

   <style>
        body {
            perspective: 300px;
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover {
            /* 沿x轴旋转 */
            /* transform: rotateX(360deg); */
            /* 沿y轴旋转 */
            /* transform: rotateY(360deg); */
            /* 沿z轴旋转 */
            transform: rotateZ(360deg);
        }
    </style>
<body>
    <img src="taoabotupian\1.png" alt="">
</body>

1.5 3D呈现 transform-style

transform-style：flat；默认不开启3d立体空间

transform-style：preserve-3d子元素开启立体空间

代码写给父亲，但是影响的是子盒子

 <style>
        /* body {
            perspective: 200px;
        } */
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 200px;
            transition: all 1s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: blue;
        }
        .box div:last-child {
            background-color: chartreuse;
            transform: rotateX(60deg);;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

两面翻转的盒子案例

<style>
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .6s;
            /* 让背面的盒子保留立体空间  给父级添加*/
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
            color: aliceblue;
        }
        .front {
            background-color: aqua;
            z-index: 1;
        }
        .back {
            background-color: brown;
            /* 像手机一样背靠背 */
            transform: translateZ(-1px) rotateY(180deg);
            /* z-index: 1; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">欢迎</div>
        <div class="back">你</div>
    </div>
</body>

3D导航栏案例

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;

        }
        ul li {
            float: left;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会需要给box旋转 也需要透视  所以给li加  里面的盒子都有透视效果 */
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .6s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .front {
            background-color: aqua;
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: chartreuse;
            /* 注意里面的值必须为负值 */
            /* 我们如果有移动和其他样式  必须先移动 */
            transform:  translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">欢迎</div>
                <div class="bottom">你</div>
            </div>
        </li>
    </ul>
</body>