css can i rotate an image code example
Example 1: css rotate text
/* Answer to: "css rotate text" */
/*
If what you are looking for is a way to set type vertically,
you’re best bet is probably CSS writing-mode, here's a link:
https://css-tricks.com/almanac/properties/w/writing-mode/
If you’re just trying to turn some text, you can rotate entire
elements like this, which rotates it 90 degrees counterclockwise:
*/
.rotate {
transform: rotate(-90deg);
/* Legacy vendor prefixes that you probably don't need... */
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/*
For more information go to:
https://css-tricks.com/snippets/css/text-rotation/
*/
Example 2: image rotate css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}