How can I rotate an HTML div 90 degrees

Question

I have a  lt div gt  that I want to rotate 90 degrees    lt div id  container 2  gt  lt  div gt    How can I do this

User · Answer

you can use css3 property writing-mode     writing-mode  tb-rl  css-tricks  mozilla

User · Answer

Use transform  rotate 90deg     x000D   x000D   container 2   x000D      border  1px solid  x000D      padding   5em  x000D      width  5em  x000D      height  5em  x000D      transition   3s all      rotate gradually instead of instantly    x000D    x000D   x000D   container 2 hover   x000D      -webkit-transform  rotate 90deg       to support Safari and Android browser    x000D      -ms-transform  rotate 90deg           to support IE 9    x000D      transform  rotate 90deg   x000D    x000D   lt div id  container 2  gt This box should be rotated 90 amp deg  on hover  lt  div gt  x000D   x000D   x000D    Click  Run code snippet   then hover over the box to see the effect of the transform   Realistically  no other prefixed entries are needed  See Can I use CSS3 Transforms

User · Answer

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     x000D   x000D   container 2   x000D    width  100px  x000D    height  100px  x000D    border  1px solid red  x000D    -webkit-transform  rotate 45deg   x000D    -moz-transform  rotate 45deg   x000D    -o-transform  rotate 45deg   x000D    -ms-transform  rotate 45deg   x000D    transform  rotate 45deg   x000D    x000D   lt div id  container 2  gt  lt  div gt  x000D   x000D   x000D     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

User · Answer

Use following in your CSS      div       -webkit-transform  rotate 90deg      Safari and Chrome        -moz-transform  rotate 90deg        Firefox        -ms-transform  rotate 90deg        IE 9        -o-transform  rotate 90deg        Opera        transform  rotate 90deg

User · Answer

We can add the following to a particular tag in CSS   -webkit-transform  rotate 90deg   -moz-transform  rotate 90deg   -o-transform  rotate 90deg   -ms-transform  rotate 90deg   transform  rotate 90deg     In case of half rotation change 90 to 45

User · Answer

Use the css  quot rotate   quot  method   x000D   x000D  div     width  100px    height  100px    background-color  yellow    border  1px solid black     div rotate    transform  rotate 90deg     x000D   lt div gt  normal div  lt  div gt   lt br gt    lt div id  rotate  gt  This div is rotated 90 degrees  lt  div gt  x000D   x000D   x000D

[html] How can I rotate an HTML <div> 90 degrees?

Examples related to html

Examples related to css