CSS如何翻译包含整个内容的DIV

Question

我正在尝试将所有内容（图像和文本）90 度翻译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">
	<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>

非常感谢

Answer 1

这确实有效，但是由于坐标系也旋转了 90 度（因此 X 变为 Y，Y 变为 X），您现在不是向前平移，而是向上平移，并且 div 离开了您的视野。把translateX改成translateY（由于demo窗口小，我也降低了翻译值）：

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>