how to rotate object in css code example

Example 1: css rotate

<style>
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}
.rotated {
  transform: rotate(45deg);
  background-color: pink;
}
</style>

/* In body of html doc */
<div>Normal</div>
<div class="rotated">Rotated</div>

Example 2: 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