Question

我在某些父元素上使用transform：matrix，但我希望子元素不受其影响。

我为父母提供了类似的东西：

transform:matrix(0.98,-0.53,0.82,0.57,0,0);
-ms-transform:matrix(0.98,-0.53,0.82,0.57,0,0);
-webkit-transform:matrix(0.98,-0.53,0.82,0.57,0,0);

并且该元素内部是孩子。我尝试过的位置：绝对的，或为孩子固定的，但这不起作用。我总是可以通过将参数更改回正常来重置孩子的矩阵位置，但要准确到达100％是不容易的。

为完整代码添加jsfiddle：https://jsfiddle.net/ypvoa8Ly/

Answer 1

而不是使用难以在子元素上反转的矩阵变换。您可以在相同的属性中使用简单的转换，您可以轻松地将其转换。

你也可以调整内部元素的位置，以避免一些坏溢出：

＆＃13;

.img-wrapper {
  width: 300px;
  height: 300px;
  margin:10px auto;
  overflow: hidden;
  transform: rotate(45deg) skew(-20deg);
  position:relative;
}

.img-wrapper img {
  transform: skew(20deg) rotate(-45deg);
  position:absolute;
  top:-15%;
  bottom:-15%;
  left:-15%;
  right:-15%;
}

＆＃13;

<div class="img-wrapper">
  <img class="main-img" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" />
</div>

＆＃13;

以下是使用渐变实现类似内容的另一种方法（因为你不能使用clip-path）：

＆＃13;

.image {
  height: 300px;
  width: 300px;
  margin: auto;
  background: 
  linear-gradient(40deg, #fff 28%, transparent 20%, transparent 75%, #fff 70%), 
  linear-gradient(-40deg, #fff 28%, transparent 20%, transparent 75%, #fff 20%), 
  url('http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg') center/cover no-repeat;
}

＆＃13;

<div class="image" ></div>

＆＃13;

2d变换仅影响父级

1 个答案: