CODEWITHSUNDEEP
htmlcss
LittleProgrammer96
LittleProgrammer96

Reputation: 1

Rotating div with css

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>

Upvotes: 0

Views: 151

Answers (1)

phynam
phynam

Reputation: 465

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);
}

Upvotes: 1

Related Questions