仅适用于父级的动画变换答案

【问题标题】：Animated transform only for parent仅适用于父级的动画变换
【发布时间】：2017-07-06 01:17:14
【问题描述】：

有没有办法为父元素设置变换，而不是为子元素？我尝试将变换的反向值设置为子元素。它可以工作，但嵌套动画不会线性运行，即使有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>

【问题讨论】：

我不这么认为。我这就是你想要的效果？ jsfiddle.net/ubw34Lj8/1
不，没有。唯一的选择是将孩子们变回另一种方式。

标签： html css transform css-transforms

【解决方案1】：

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

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

sn-p 见，应用了 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>

【讨论】：