歪斜時圖像不旋轉嗎？

我想剪切圖像中的小元素。所以，我使用skew來做到這一點。歪斜時圖像不旋轉嗎？

但是當傾斜時，圖像看起來破碎，我想保持圖像不旋轉。

我這樣的代碼：

.image-skew{ 
 
/* transform: skewX(-25deg); */ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.img-skew-invest { 
 
    transform: skewX(-25deg); 
 
    display: flex; 
 
}

<div class="image-skew"> 
 
    <img class="img-skew-invest" src="http://thebusiness.vn/uploads/business360/chuyenkinhdoanh/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam.png" alt="" style="width: 100%; height: auto"/> 
 
</div>

相同的圖像。

我剪切了一張歪斜的圖片元素，但它應該是不旋轉的。

來源

2016-11-11 vanloc

問題是超級含糊。你能詳細解釋一下嗎？ –

'skew'正在做它應該做的事情。我不明白你對它的期望。 – Kroltan

clip-path會符合您的要求：

.image-skew { 
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%); 
clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%); 
}

自己嘗試一下：https://jsfiddle.net/hgzsr5f5/1/或嘗試夾路徑生成：http://bennettfeely.com/clippy/

來源

2016-11-11 09:31:02

您的答案解決了我的問題。它很有用。謝謝，@jaredchu。 – vanloc

歪斜時圖像不旋轉嗎？

回答

相關問題