2d transform affect parent only - css

Question

I'm using transform:matrix on some parent element, but i want that child element is not affected by it.
I've got something like that for 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);
and inside that element is child.
I've tried position:absolute, or fixed for the child, but that doesn't work. I can always reset matrix positions for the child by changing parameters back to normal, but it is not easy to get that exact 100% accurate.
Adding jsfiddle for full code: https://jsfiddle.net/ypvoa8Ly/

Answer 1

Instead of using matrix transformation that can be hard to invert on child element. You can instead use simple transformation in the same property that you can easily invert.
You may also adjust the position of the inner element to avoid some bad overflow:
.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>
Here is also another way to achieve something like this using gradient (since you cannot use 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>