Question

有没有办法为父元素设置变换，但不能为子元素设置变换？我尝试将transform的反转值设置为子元素。它有效，但嵌套动画不会线性运行，即使有transition: all 1s linear;也是如此。这是example。

＆＃13;

.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
}

＆＃13;

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

＆＃13;

Answer 1

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

当应用透视时，另一个看起来像缩放的变换，是线性的变换是translateZ。将对象移动9倍透视，表观尺寸为1/10。

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

＆＃13;

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); 
}

＆＃13;

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

＆＃13;

仅适用于父级的动画转换

1 个答案: