css - css左右两个框带transform

Question

正如我的标题，我有两个像这样的框，伙计们，现在你可以理解我的问题了；）在响应式布局中，我想用背景黄色变换显示这个框，就像这个左侧是浮动左侧，另一个是浏览器窗口右侧浮动. 我觉得这太难了请帮我朋友的:(

我使用 css3

Answer 1

这是您的（主要是）跨浏览器解决方案：

<style type="text/css">
#oneOfYourRectangles
{
    -ms-transform:rotate(10deg); /* IE 9 */
    -moz-transform:rotate(10deg); /* Firefox */
    -webkit-transform:rotate(10deg); /* Safari and Chrome */
    -o-transform:rotate(10deg); /* Opera */
}
#theOtherRectangle
{
    -ms-transform:rotate(350deg); /* IE 9 */
    -moz-transform:rotate(350deg); /* Firefox */
    -webkit-transform:rotate(350deg); /* Safari and Chrome */
    -o-transform:rotate(350deg); /* Opera */
}
</style>

你知道，我从来没有测试过是否支持负值。

另外，请注意，显然 10 度和 350 度只是猜测。用最适合的值替换它们。

而且，只是为了好玩，请注意 webkit（Safari 和 Chrome）也支持 3D 转换。