html - 仅适用于父级的动画变换

Question

有什么方法可以为父元素设置变换，但不能为子元素设置变换？我尝试将转换的反向值设置为子元素。它工作正常，但嵌套动画不会线性运行，即使存在 transition: all 1s linear;。这是 example .

.container, .title {
  transition: all 1s linear;
}

.image {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  height: 300px;
  width: 800px;
}

.container {
  transform: scale(0.1); // 0.1× size of parent
}

.title {
  text-align: center;
  padding-top: 1rem;
  transform: scale(10); // 10× size of child
}

.container:hover {
  transform: scale(0.5); // 0.5× size of parent on hover
}

.container:hover .title {
  transform: scale(2); // 2× size of child on hover
}

<div class="container">
   <div class="image">
   
   </div>
   <h1 class="title">Title</h1>
</div>

Answer 1

由于变换比例是乘法的，因此 2 个变换比例不会在过渡期间进行补偿。

另一个看起来像比例尺且是线性的变换是 translateZ，当应用透视图时。将物体移动9倍视角，外观尺寸为1/10。

看到你的片段，应用了 2 个相反的 translateZ:

body {
    perspective: 100px;
}
.container, .title {
  transition: all 1s linear;
}
.image {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  height: 300px;
  width: 800px;
}
.container {
  transform: translateZ(-900px);
  transform-origin: center bottom;
  transform-style: preserve-3d;
}
.container:hover {
  transform: translateZ(-100px); 
}

.title {
  text-align: center;
  padding-top: 1rem;
  transform: translateZ(900px); 
  transform-style: preserve-3d;
}

.container:hover .title {
  transform: translateZ(100px); 
}

<div class="container">
   <div class="image"></div>
   <h1 class="title">Title</h1>
</div>