How to rotate a 90 degrees?

by

You need CSS to achieve this, e.g.:

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Demo:

#container_2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div id="container_2"></div>

(There’s 45 degrees rotation in the demo, so you can see the effect)

Note: The -o- and -moz- prefixes are no longer relevant and probably not required. IE9 requires -ms- and Safari and the Android browser require -webkit-

Update 2018: Vendor prefixes are not needed anymore. Only transform is sufficient. (thanks @rinogo)

More Related Contents:

  1. change the menu font size
  2. Can I debug by CSS code in easy way for beginner?
  3. Setting columns in bootstrap grid
  4. How to write a:hover in inline CSS?
  5. Landscape printing from HTML
  6. Change color of PNG image via CSS?
  7. Use images instead of radio buttons
  8. Is it possible to have two background colors for a single html element? [duplicate]
  9. How to prevent scrollbar from repositioning web page?
  10. Fixed header, footer with scrollable content
  11. Two inline-block, width 50% elements wrap to second line [duplicate]
  12. Expanding a parent to the height of its children
  13. How to hide image broken Icon using only CSS/HTML?
  14. Display HTML child element when parent element is display:none
  15. Why does vw include the scrollbar as part of the viewport?
  16. Why does overflow hidden stop floating elements escaping their container?
  17. HTML-Tooltip position relative to mouse pointer
  18. `margin:auto;` doesn’t work on inline-block elements
  19. Change checkbox check image to custom image
  20. add title attribute from css
  21. How to add background image for input type=”button”?
  22. Flexbox, z-index & position: static: Why isn’t it working?
  23. How to rotate and postion an element on the top left or top right corner?
  24. Bootstrap full-width text-input within inline-form
  25. Can you style html form buttons with css?
  26. Internet Explorer and clip-path
  27. Why is my .sticky-top class not working in Bootstrap 4?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. Make plus symbol in CSS
  30. Flex elements ignore percent padding in Firefox

Leave a Comment