如何翻译DIV及其所有内容的CSS

Question

如何翻译DIV及其所有内容的CSS

3

我想将一个包含文本和图片的

标签旋转90度，该怎么做呢？

我尝试了以下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>

非常感谢

- Alvaro Silvino

http://www.the-art-of-web.com/css/css-animation/ 看起来很有趣，但我还没有尝试过。根据 http://www.w3schools.com/CSSref/css3_pr_rotation.asp，旋转的范围是0到360，所以请尝试将-90替换为270。 - Bradley Ross

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nicael · Accepted Answer

这个确实可以工作，但由于坐标系也旋转了90度（因此X变成了Y，Y变成了X），您现在不是向前移动，而是向上移动，div会超出您的视野。将translateX更改为translateY（我还减小了平移值，因为演示窗口很小）：

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>