为什么继承属性在以下情况下不起作用？

Question

<div class="box outer">
        <div class="box inner">box-1</div>
    </div>
    <div class="box outer">
        <div class="box inner box-2">box-2</div>
    </div>
    <div class="box outer">
        <div class="box inner">box-3</div>
    </div>

/*如果我使用position属性*/

.box {
        height: 100px;
        width: 100px;
        border: 2px solid purple;
    }
    
    .outer {
        background-color: blue;
    }
    
    .inner {
        background-color: brown;
        transform: scale(0.75) rotate(45deg);
    }
    
    .box-2 {
        position: relative;
        left: 100px;
    }

浏览器会显示我的预期结果

​

如果我对.box-2*/使用transform属性，则为/*

.box-2 {
     transform: translateX(100px);
        }

浏览器显示(非预期)：

​

如果使用继承属性，则为/* */

.box-2 {
            transform: translateX(100px) inherit;
        }

​

​

transform属性不是继承的(不是预期的)，这是我的问题所在。

/*如果我按如下方式编写代码*/

.box-2 {
            transform: translateX(100px) scale(0.75) rotate(45deg);
        }

然后浏览器显示与使用position:relative和left:100px相同的预期结果；

​

所以我的问题是，为什么继承属性不起作用，或者我的代码出了什么问题？

Answer 1

执行此操作时：

.box-2 {transform: translateX(100px);}

您只需覆盖之前在inner上设置的转换，因为只能设置一个转换：

​

.box {
  height: 100px;
  width: 100px;
  border: 2px solid purple;
}

.outer {
  background-color: blue;
}

.inner {
  background-color: brown;
  transform: scale(0.75) rotate(45deg); /* this will have no effect */
}

.box-2 {
  transform: translateX(100px);
}

<div class="box outer">
  <div class="box inner">box-1</div>
</div>
<div class="box outer">
  <div class="box inner box-2">box-2</div>
</div>
<div class="box outer">
  <div class="box inner">box-3</div>
</div>

​

​

​

执行此操作时：

.box-2 {transform: translateX(100px) inherit;}

这个值是完全无效的。您不能将inherit与其他东西组合在一起。inherit本身就是一个值。因此，您的浏览器将忽略它，并使用初始转换

​

​

正如您已经发现的，正确的方法是链接所有的转换：

transform: translateX(100px) scale(0.75) rotate(45deg);