二维变换仅影响 parent

Question

我在某些 parent 元素上使用 transform:matrix，但我希望 child 元素不受它的影响。

我为 parent 准备了类似的东西：

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

并且该元素内部是 child。我已尝试 position:absolute，或修复 child，但这不起作用。我总是可以通过将参数更改回正常来重置 child 的矩阵位置，但要获得 100% 准确的准确度并不容易。

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

Answer 1

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

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

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

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

这里还有另一种使用渐变实现类似效果的方法（因为你不能使用 clip-path）：

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

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

二维变换仅影响 parent

2d transform affect parent only

css

2d

transform