CSS how translate DIV with whole content in it

Question

I'm trying to translate in 90 degrees a div with it all content (images and text), how can I do that?

I tried this css but no success :

div.ccw {
         transform: rotate(-90deg) translateX(540px); 
         -webkit-transform: rotate(-90deg) translateX(540px); 
        -moz-transform: rotate(-90deg) translateX(540px);
        -o-transform: rotate(-90deg) translateX(540px);
        -ms-transform: rotate(-90deg) translateX(540px);
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-view=""  class="container-fluid main-screen ng-scope ccw"><div class="error row ng-scope">
 <div class="col-xs-12 text-center">
  <div class="padding-3percent logo col-xs-12 text-center">
   <img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="padding-2percent logo col-xs-12 text-center">
   <img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="text-center col-xs-12">
   <h1>TEST</h1>
  </div>
  <div class="text-center col-xs-12">
   <strong>Test test Test test Test test Test test Test test</strong> 
  </div>
  <div id="footer">
   <div class="text-center col-xs-12">
    <p>
     Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test
    </p>
   </div>
   <div class="text-right col-xs-12">
    <span>counter</span>
   </div>
  </div>
 </div>
</div></div>

Many thanks

http://www.the-art-of-web.com/css/css-animation/ looks interesting, but I haven't tried it. According to http://www.w3schools.com/CSSref/css3_pr_rotation.asp, the range for rotation is 0 to 360, so try replacing -90 with 270. — Bradley Ross, Jun 16 '16 at 18:43

nicael · Accepted Answer · 2016-06-16T18:44:27.657

This does work, but since the coordinate system is rotated too by 90 degrees (so as X becomes Y and Y becomes X), you are now translating not forwards, but upwards, and the div gets out of your view. Change translateX to translateY (I also reduced the translation value since the demo window is small):

div.ccw {
   transform: rotate(-90deg) translateY(240px); 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-view=""  class="container-fluid main-screen ng-scope ccw"><div class="error row ng-scope">
 <div class="col-xs-12 text-center">
  <div class="padding-3percent logo col-xs-12 text-center">
   <img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="padding-2percent logo col-xs-12 text-center">
   <img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="text-center col-xs-12">
   <h1>TEST</h1>
  </div>
  <div class="text-center col-xs-12">
   <strong>Test test Test test Test test Test test Test test</strong> 
  </div>
  <div id="footer">
   <div class="text-center col-xs-12">
    <p>
     Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test
    </p>
   </div>
   <div class="text-right col-xs-12">
    <span>counter</span>
   </div>
  </div>
 </div>
</div></div>

Thanks!! can you tell me the diff btw x axis and y axis in this case?(sorry by noobness) — Alvaro Silvino, Jun 16 '16 at 18:36
@Alvaro But you've rotated the coordinate system by 90 degs. X is now Y and Y is now X. — nicael, Jun 16 '16 at 18:37
@Alvaro Draw XY system on the sheet of paper and rotate the sheet by 90 degrees :) — nicael, Jun 16 '16 at 18:38
Hey can you help me in this one? http://stackoverflow.com/questions/37869681/css-how-make-the-page-full-height-and-width-when-rotate-body :) — Alvaro Silvino, Jun 16 '16 at 21:36

CSS how translate DIV with whole content in it

1 Answers1