Like this article? We recommend
Rotating
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Rotating
The rotate transform effect in CSS3 is very similar to the skew effect, except that instead of distorting the shape of the selected content, the entire content rotates (see Figure 5).
)
Figure 5 Applying rotation to text and an image.
You can replicate the steps from the preceding section to define an ID Div style that rotates content; just replace skew with rotate. Your resulting CSS code will look like this in your CSS style sheet:
#rotate {
float:left;
background-color: #FF0;
margin: 10px;
padding: 10px;
width:150px;
height:200px;
border: thin solid #00F;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
}
You can adapt and customize this code by editing the background color, border, padding, size, and so on in the CSS Styles panel, and you can adjust the rotation angle in the CSS code.