Rotating div with css

Question

Hello I am wondering how to rotate div like from upside down to 45 dg left so content go from left to right. And to rotate content divs as well 45dg to right so it looks something like this:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    HELLO                HOW ARE YOU?

                 HI!                      GOOD AND U?

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Words got rotated to right and div got rotated to left

DONE:

<!DOCTYPE html>
<html>
<head>
<style>
body{



}


#myDiv {
width: 200px;
    height: 400px;

    border: 1px solid black;
margin-left: 100px;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari */
    transform: rotate(270deg); /* Standard syntax */
}
#sasa{
    margin-left: 100px;
margin-top: 100px;
    border: 1px solid;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg); /* Standard syntax */
}
</style>
</head>
<body>



<div id="myDiv">
<div id="sasa">Hello</div><div id="sasa">Hello</div>
</div>

</body>
</html>

phynam · Accepted Answer · 2016-05-20 22:17:25Z

1

You can use a rotate transform

<div class="rotated">Hello World</div>

Css:

.rotated {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
}

answered May 20, 2016 at 22:17

phynam

4642 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LittleProgrammer96 Over a year ago

It wont work i am trying on w3schools editor and I cant see my div with text... I have rotated first div and divs inside but there is no text showing ...

LittleProgrammer96 Over a year ago

I did it and it is very complicated with margins when you rotate

Collectives™ on Stack Overflow

Rotating div with css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related