how to make image rotate in css code example

Example 1: image rotate with css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

Example 2: set rotation of img in css

transform: rotate(180deg);

Example 3: 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/
*/

Tags:

Css Example

Recent Posts