请老师检查作业， transform: translate(0, 80px) rotateX(300deg)

请老师检查作业， transform: translate(0, 80px) rotateX(300deg);这里面的属性顺序不同页面展示的效果也不同，为啥啊？？？

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

<head>
    <meta charset="UTF-8">
    <title>空间移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            perspective: 300px;
            position: relative;
        }

        .box p {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        /* 补充代码 */
        .box p:nth-child(1) {
            background: red;
            transform: translate(0) rotateX(100deg);
        }

        .box p:nth-child(2) {
            background: green;
            transform: translate(0, 80px) rotateX(300deg);

        }

        .box p:nth-child(3) {
            background: blue;
            transform: translate(0, 160px) rotateX(310deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

</html>

慕粉0915 2023-07-14

源自：2D与3D转换 2-14 编程练习

收起

1回答

好帮手慕久久 2023-07-14 13:24:33

同学你好，解答如下：

1、属性不同，效果不同的原因，请查看如下回复：

https://class.imooc.com/course/qadetail/346305

2、思路是对的，但是具体效果与练习要求有点差别。可以参考如下实现方式，对比一下自己的效果：

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空间移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            perspective: 300px;
            position: relative;
        }
        .box p {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }
        /* 补充代码 */
        .box p:nth-child(1) {
            background: rgba(255, 0, 0, 0.5);
            transform: rotateX(-90deg) translateZ(32px);
        }
        .box p:nth-child(2) {
            background: rgba(0, 255, 0, 0.5);
            transform: rotateX(-85deg) translateZ(66px);
        }
        .box p:nth-child(3) {
            background: rgba(0, 0, 255, 0.5);
            transform: rotateX(-76deg) translateZ(102px);
        }
    </style>
</head>
<body>
<div class="box">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>
</html>

祝学习愉快！

收起回答