CSSどのようにしてDIVのコンテンツ全体を翻訳する

Question

私はを翻訳しようとしていますdivすべての内容（画像とテキスト）をどうすればいいですか？

私はこのCSSを試みたが、成功しません：

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"> 
 
\t <div class="col-xs-12 text-center"> 
 
\t \t <div class="padding-3percent logo col-xs-12 text-center"> 
 
\t \t \t <img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png"> 
 
\t \t </div> 
 
\t \t <div class="padding-2percent logo col-xs-12 text-center"> 
 
\t \t \t <img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png"> 
 
\t \t </div> 
 
\t \t <div class="text-center col-xs-12"> 
 
\t \t \t <h1>TEST</h1> 
 
\t \t </div> 
 
\t \t <div class="text-center col-xs-12"> 
 
\t \t \t <strong>Test test Test test Test test Test test Test test</strong> 
 
\t \t </div> 
 
\t \t <div id="footer"> 
 
\t \t \t <div class="text-center col-xs-12"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test 
 
\t \t \t \t </p> 
 
\t \t \t </div> 
 
\t \t \t <div class="text-right col-xs-12"> 
 
\t \t \t \t <span>counter</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div></div>

感謝

Answer 1

これが作業を行いますが、座標系がそのようにXと90度（であまりにも回転しているので、 YはYになり、YはXになります）、あなたは現在進行中ではなく、上向きに翻訳され、divはあなたの視点から外れます。 translateYからtranslateXを変更します（デモ画面が小さいので、私はまた、翻訳値を減少）：

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"> 
 
\t <div class="col-xs-12 text-center"> 
 
\t \t <div class="padding-3percent logo col-xs-12 text-center"> 
 
\t \t \t <img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png"> 
 
\t \t </div> 
 
\t \t <div class="padding-2percent logo col-xs-12 text-center"> 
 
\t \t \t <img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png"> 
 
\t \t </div> 
 
\t \t <div class="text-center col-xs-12"> 
 
\t \t \t <h1>TEST</h1> 
 
\t \t </div> 
 
\t \t <div class="text-center col-xs-12"> 
 
\t \t \t <strong>Test test Test test Test test Test test Test test</strong> 
 
\t \t </div> 
 
\t \t <div id="footer"> 
 
\t \t \t <div class="text-center col-xs-12"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test 
 
\t \t \t \t </p> 
 
\t \t \t </div> 
 
\t \t \t <div class="text-right col-xs-12"> 
 
\t \t \t \t <span>counter</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div></div>