我正在尝试创建一个可以接受背景图像的旋转容器。
问题是,我试图保持原始图像的比例,所以图像不会倾斜,而只会被裁剪。
这是我设置的小提琴:http: //jsfiddle.net/RyU9W/38/
HTML:
<div id="container" class="color-container">
<p>Colored Container</p>
</div>
<div class="sep"></div><div class="sep"></div>
<div id="container" class="image-container">
<p>Image Container</p>
</div>
CSS:
p {padding: 250px 0;}
.sep {margin: 250px 0;}
#container{background:none; position:relative;}
#container:before {
content: "";
position:absolute;
display:block;
width:100%;
height:100%;
padding: 100px 0;
z-index:-1;
-webkit-transform: skew(0deg, 4deg) translateZ(0);
transform: skew(0deg, 4deg) translateZ(0);
}
.color-container:before {background: royalblue;}
有一个运行良好的彩色容器,但图像无法正确旋转。
我会很感激任何帮助!