How to Rotate a <Div> 90 Degrees

How to rotate a div 90 degrees?

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>

Rotate div 90 degrees and position fixed in the upper left corner

So I manage to position it the way you want, no matter how big your content is using position: absolute; for your .inner-div.

~~The only drawback is that your text is facing downwards and not upwards. Couldn't get around that issue with my CSS :S~~

If you -webkit-transform: rotate(180deg); the child of .inner you can turn the text the right way up :)

.outer {  position: fixed;  left: 20px;  top: 20px;  background: red;}
.inner {  position: absolute;  bottom: 100%;  -webkit-transform: rotateZ(90deg);  transform-origin: 0 100%;  background: #AACAD7;  white-space: nowrap;;}.rotate {  -webkit-transform: rotate(180deg);}ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }ul li { padding: 5px 10px; }

<div class="outer">  <div class="inner">    <ul class="list rotate">      <li class="item">lasange | spaghetti</li>    </ul>  </div></div>

CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

You need to adjust the transform-origin and add some translation to rectify the position. You have to also add overflow:hidden to hide the overflow created by the element because transform is only a visual effect and will not modify the layout of the page and before the tranform you will for sure have an overflow since you inverted the viewport units:

.rotate {  transform: rotate(90deg) translateY(-100%);  transform-origin:top left;}
.bg {  background: url(https://picsum.photos/2000/1000?image=1069) center/cover;  height: 100vw;  width: 100vh;}
body {  margin:0;  overflow:hidden;}

<div class="rotate bg"> </div>

jQuery rotate div onclick +/-90

You could use toggleClass and apply css transform to that class:

$('button:first-of-type').on('click', ()=> $('#rotate').toggleClass('rotated'));

const btn = document.querySelector('button:nth-of-type(2)');
const block2 = document.querySelector('#rotate2');

btn.addEventListener('click', ()=>block2.classList.toggle('rotated'));

body {text-align: center;}
#rotate, #rotate2 {
  width: 100px;
  height: 100px;
  background: red;
  border-top: 10px solid black;
  transition: transform .2s ease;
  margin: 20px auto;
  color: #fff;
}

.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>rotate block</button>

<div id="rotate">jQuery</div>

<button>rotate block</button>

<div id="rotate2">Vanilla</div>

How to fix multiple div s overlapping one another when rotated 90 degrees

Instead of rotating the inner divs, you can rotate the parent div directly

codepen link

<div class="rectwrapper">
    <div class="rect">ABCD</div>
    <div class="rect">ABCD</div>
    <div class="rect">ABCD</div>
 </div>




  .rectwrapper{

-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);
  display: flex;
}

.rect {
  background: green;
  border: 2px solid brown;
  height:11cm !important;
width:15.2cm !important;

}

Rotate all html element (whole page) 90 degree with CSS?

So that was fun. Fiddle

body{    margin:0;    overflow:hidden;}.wrapper{    transform: rotate(90deg);    transform-origin:bottom left;        position:absolute;    top: -100vw;    left: 0;        height:100vw;    width:100vh;        background-color:#000;    color:#fff;
    overflow:auto;}

<body>    <div class='wrapper'>        test<br />        <hr />        <div><hr /></div>        <div><div><hr /></div></div>        <div>ing</div>    </div></body>

CSS Rotate Flex Layout 90 degrees on Mobile

This can be done using flexbox, simply set flex-direction to column.

.wrap {  display: flex;  flex-direction: row;  justify-content: space-evenly;  margin-bottom: 25px;}
.wrap--mobile {  flex-direction: column;  float: left;  width: 50px;  height: 400px;  margin-right: 25px;}
.block {  width: 50px;  height: 50px;  background-color: red;}

<!-- Horizontal layout !--><div class="wrap">  <div class="block">1</div>  <div class="block">2</div></div>
<div class="wrap">  <div class="block">1</div>  <div class="block">2</div>  <div class="block">3</div>  <div class="block">4</div></div>
<div class="wrap">  <div class="block">1</div>  <div class="block">2</div>  <div class="block">3</div></div>
<hr>
<!-- Vertical layout !--><div class="wrap wrap--mobile">  <div class="block">1</div>  <div class="block">2</div></div>
<div class="wrap wrap--mobile">  <div class="block">1</div>  <div class="block">2</div>  <div class="block">3</div>  <div class="block">4</div></div>
<div class="wrap wrap--mobile">  <div class="block">1</div>  <div class="block">2</div>  <div class="block">3</div></div>

How to Rotate a <Div> 90 Degrees