html中左斜变换,CSS3转换偏斜一侧

您可以使用变换和变换原点来实现。

组合各种转换会得到相似的结果。我希望你觉得这对你有帮助。:)有关更简单的转换，请参见这些示例。这有一点：

div {

width: 300px;

height:200px;

background-image: url('http://placecage.com/g/300/200');

-webkit-transform: perspective(300px) rotateX(-30deg);

-o-transform: perspective(300px) rotateX(-30deg);

-moz-transform: perspective(300px) rotateX(-30deg);

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

margin: 10px 90px;

}

这具有正确的偏斜点：

div {

width: 300px;

height:200px;

background-image: url('http://placecage.com/g/300/200');

-webkit-transform: perspective(300px) rotateX(-30deg);

-o-transform: perspective(300px) rotateX(-30deg);

-moz-transform: perspective(300px) rotateX(-30deg);

-webkit-transform-origin: 0% 50%;

-moz-transform-origin: 0% 50%;

-o-transform-origin: 0% 50%;

transform-origin: 0% 50%;

margin: 10px 90px;

}