老师这一行代码为什么被划线了？

相关代码：

<!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>空间移动</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-color: #FF7F7F;
            transform: rotateX(83deg);
        }
        
        .box p:nth-child(2){
            background-color: #7FFF7F;
            transform: translate(20px, 20px);
            transform: rotateX(83deg);
        }
        .box p:nth-child(3){
            background-color: #7F7FFF;
            transform: rotateX(83deg);
        }

    </style>
</head>

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

</html>

问题描述：

已经设置了位移变形，但没移动，代码还被划掉了，不能只有定位才有效吧？

刘徽 2023-08-01

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

收起

1回答

好帮手慕小李回答被采纳获得+3积分 2023-08-01 13:09:38

同学你好，因为重复写了transform那么最下面的会覆盖最上面的。所以相同属性不能重复出现如下：

可以调整为：

祝学习愉快！

收起回答

刘徽提问者 #1

一个是位移变形，一个是3D旋转，2个属性并不冲突，这样写也会被覆盖吗？

2023-08-01 15:29:25
好帮手慕久久回复提问者刘徽 #2

同学你好，你所说的“位移变形”、“3d旋转“不是属性，而是属性值。它们是transform这个属性的属性值，属性是transform，同学同时设置了两个transform属性，所以会发生属性覆盖：

2023-08-01 15:38:27