Question

As i titled i have two boxes like this Guys now you can understand my problem 😉
in a responsive layout i want to display this boxes with background yellow transform like this one of left is float left and other one is float right of the browser window. i think its too hard please help me friend’s 🙁

iam using css3

Answer 1

Here’s your (mostly) cross-browser solution:

<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>

Ya know, I never did get around to testing to see if negative values are supported.

Also, note that obviously the 10deg and 350deg are just guesses. Replace them with whatever value fits best.

And, just for funsies, note that webkit (Safari and Chrome) support 3D transformations, too.