CSS 變換是一種強大的工具，可用於操縱網頁上元素的外觀。最通用的變換之一是傾斜變換，它可用於以指定角度傾斜元素。
但是，預設情況下，傾斜變換會同等地影響元素的兩側。在某些情況下，這可能會受到限制，例如當您只想傾斜元素的一側（例如背景圖像）時。
幸運的是，有一種方法可以使用 CSS 僅傾斜元素的一側。透過對要傾斜的元素使用嵌套 div，您可以將傾斜變換套用到父 div，然後將相反的傾斜變換套用到子 div。這將有效地僅傾斜元素的一側。
以下是如何僅傾斜元素的一側的範例：
.container {
overflow: hidden;
}
#parallelogram {
width: 150px;
height: 100px;
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow: hidden;
position: relative;
}
.image {
background: url(http://placekitten.com/301/301);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}此 CSS 將建立一個帶有紅色的 div背景，寬度和高度分別為 150px 和 100px。 div 將向右傾斜 20 度並包含影像。透過應用相反的傾斜變換（-20deg），影像將不再傾斜。
以上是如何使用 CSS3 變換僅傾斜元素的一側？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
