css3的perspective或者transform:tanslateZ没有效果

关注

最新推荐文章于 2025-11-18 11:33:59 发布 · 1.6k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Miniconda入门：在CentOS上的安装、基本操作、目录结构、卸载 Miniconda是一个免费的轻量级的 conda安装程序它只包含conda、Python、pip、zlib等基础的文件和依赖包使用conda install命令可从Anaconda存储库中安装额外的conda包简介下载安装基本操作虚拟环境的操作包的操作目录结构卸载阅读详情

现在css学习到了3D效果了，今天跟着教程学习到了旋转，结果发现我的 perspective没有效果，反复检查了代码也没有问题，后来想着再往后做做，看看情况，做到第二个图片的时候，发现确实是效果没出来，去搜了一下perspective的效果不显示怎么办，说是要加style，可是我已经加了没有用，也试过关闭软件重新启动等方法，也没有查到合适的

以下是我遇到问题的运行后的图

没有3D效果

再后来试着改改translateZ看看有没有反应，发现没有，这个时候再去查，就好查很多了，说是要加transform-style: preserve-3d，要注意不能和overflow: hidden同时出现，否则效果将失效，我先检查了一下，两个都没有加，现在就是位置的问题，首先要注意得放在父级，我先放在body里没有效果，后来属实找不到位置就每个都放了一下，找到了，也就解决问题了

效果出来了

其他的都不行，重新整理了一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* transform-style: preserve-3d; */
            perspective: 1000px;
        }

        section {
            width: 256px;
            height: 157px;
            margin: 150px auto;
            position: relative;
            transform-style: preserve-3d;
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/scale.jpg) no-repeat;
            /* transform-style: preserve-3d; */
        }

        section div:nth-child(1) {
            transform: translateZ(350px);
        }

        section div:nth-child(2) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(45deg) translateZ(350px);
        }

        section div:nth-child(3) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(90deg) translateZ(350px);
        }

        section div:nth-child(4) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(135deg) translateZ(350px);
        }

        section div:nth-child(5) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(180deg) translateZ(350px);
        }

        section div:nth-child(6) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(225deg) translateZ(350px);
        }

        section div:nth-child(7) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(270deg) translateZ(350px);
        }

        section div:nth-child(8) {
            /* 先旋转好了再移动距离 */
            transform: rotateY(315deg) translateZ(350px);
        }
    </style>
</head>


<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>