Question

我正在尝试翻译90度 a 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（由于演示窗口很小，我也减少了翻译值）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS如何将DIV与整个内容一起翻译

1 个答案: