CSS 变换 div 一切都保持旋转答案

【问题标题】：CSS transform div everything remains rotatedCSS 变换 div 一切都保持旋转
【发布时间】：2016-11-02 02:04:37
【问题描述】：

我正在使用以下内容旋转一组 div；

map-grid:
-webkit-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -moz-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -ms-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -o-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);

这是为了创建一种等距网格。它工作正常，但是我想保持正常视角的每个 div 的内容，所以我尝试了；

map-grid-cell-content:
-webkit-transform: none; 
       -moz-transform: none; 
        -ms-transform: none; 
         -o-transform: none; 
            transform: none;

标记是这样的

<div class='map-container'>
  <div class='map-grid'>

    <div class="map-grid-cell-content">
       << this is where i need the content to be normal >>
    </div>

  </div>
</div>

但一切都在旋转，请问有什么想法吗？

【问题讨论】：

最简单的方法是让子div的属性与父div相反。

标签： css transform skew

【解决方案1】：

.map-grid {
  -webkit-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -moz-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -ms-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    -o-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
    transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em);
  margin-top: 300px;
  }
.map-grid-cell-content {
  transform: skewX(45deg) rotate(0deg);
}

<div class='map-container'>
  <div class='map-grid'>

    <div class="map-grid-cell-content">
       dwdwaddawwa
    </div>

  </div>
</div>

这是你需要的吗？

【讨论】：

不像上面的代码那么简单。您没有包括的是如何还原子元素的 scaleX 和 scaleY 。这实际上是通过将初始值除以 1 然后将其用作子元素属性来完成的。例如 .map-grid {transform:scaleX(1.785) scaleY(.8);} 所以子 div 属性将是 1/1.785 和 1/.8 导致 .map-grid-cell-content {transform:scaleX( 0.56) scaleY(1.25);} 您还需要为子元素添加绝对定位，以便反转 translateX 和 translateY 定位。