How to Rotate Props in CSS

If you are coding a game or website in CSS that features props, you might want to rotate those props to fit your layout or create a more varied visual display. After you have inserted the prop into the game, rotating it is simple. You just take the prop ID you created when you added it, then add the CSS rotation code. The only catch is that the major browsers run CSS rotation differently, so you'll need a line of code for each.

Instructions

1. Open your CSS text file.

2. Start a new line with a # and then the prop ID. For instance, "prop1" would start like: #prop1 {

3. Copy and paste the following on the next lines:

   -moz-transform:rotate(XXdeg);

   -webkit-transform:rotate(XXdeg);

   -o-transform:rotate(XXdeg);

   -ms-transform:rotate(XXdeg);

4. Replace "XX" in all four instances with the number of degrees to rotate clockwise. You can also add a negative sign to rotate counterclockwise. For instance, to rotate 60 degrees, your code would look like:

   #prop1 {

   -moz-transform:rotate(60deg);

   -webkit-transform:rotate(60deg);

   -o-transform:rotate(60deg);

   -ms-transform:rotate(60deg);

5. Close the CSS code with a closing bracket. For instance:

   #prop1 {

   -moz-transform:rotate(60deg);

   -webkit-transform:rotate(60deg);

   -o-transform:rotate(60deg);

   -ms-transform:rotate(60deg);

   }

References

• Script Tutorials: How to Use Rotation Via CSS