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中文网其他相关文章！
