时间戳

首页 > 解决方案 > 从孩子身上移除变换和透视。not() 和重新指定不起作用

css - 从孩子身上移除变换和透视。not() 和重新指定不起作用

问题描述

https://jsfiddle.net/98uo6h2e/2/

所以我用下面的代码做了一个透视效果。我想排除 .hello2 仅使用 CSS 采用变换和/或透视效果。我该怎么做呢？

已经尝试在 .hello 中将转换和 webkit 重新指定为 none/unset/initial 没有发生任何事情。

<table id="hello">
  <tbody>
    <tr>
      <td>
        <div class="hello2">
          <strong>Test</strong>
          <h2>Test2</h2>
        </div>
      </td>
    </tr>
  </tbody>
</table>


table#hello:not(.hello2) {
  -webkit-perspective-origin: center top;
  -webkit-perspective: 100;
}

tbody:not(.hello2) {
  transform: rotate3d(0.1, 0, 0, 40deg);
  -webkit-transform-origin: center top;
}

.hello2 {
  -webkit-transform-origin: initial;
  -webkit-perspective-origin: initial;
  -webkit-perspective: initial;
}

标签： css

解决方案

您可以使用:not选择器。

table#hello:not(.hello2) {
    -webkit-perspective-origin: center top;
    -webkit-perspective: 100;
}
tbody:not(.hello2) {
    transform: rotate3d(0.1, 0, 0, 40deg); 
    -webkit-transform-origin: center top;
}

推荐阅读