0

望ましい効果は、「飛び出す」本のように 2 つの垂直なドーム要素を持つことです。ただし、子要素は親の平面に平坦化/投影されるようです。

2つの要素が兄弟である場合に機能するようです。ただし、親子要素でこれを実現する方法を探しています。

<div class="container">
    <div class="parent" style="height:300px; width:300px;">
      <div class="child" style="height:100px; width:10px;">

      </div>
    </div>
</div>

.container {
  perspective: 1000;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
}

.parent {
  transform:rotateX(60deg);
  -moz-transform:rotateX(60deg);
  -webkit-transform:rotateX(60deg);
  background:grey;
}

.child {
  transform:rotateX(-30deg);
  -moz-transform:rotateX(-30deg);
  -webkit-transform:rotateX(-30deg);
  background:red;
  margin: 100px;
}
4

2 に答える 2

1

私は解決策を見つけました。

.parent {
    overflow: visible !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

すべてを解決した

于 2013-03-29T14:47:04.043 に答える
0

親要素と子要素にいくつかの変更があります

.parent:before,
.parent:after {
 content: ".";    
 display: block;    
 height: 0;    
 overflow: hidden; 
}
.parent:after {clear: both;}

.child {
 transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
background:red;
margin: -60px 100px 100px 100px;
}

ここでフィドルを見ることができます ここをクリック

于 2013-03-28T11:59:04.373 に答える