为整个页面维护单个CSS透视源

ztyzrc3y 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(124)

有没有办法将整个页面的透视原点设置为单个点？
当文档提到子元素的透视图时，它们显然只是指直接的子元素。
因此，如果我们希望一个页面中的所有转换元素都具有相同的透视图，我们要么必须将所有这些元素都作为一个元素的直接子元素，要么对每个元素进行一些手动计算以匹配原点--原点相对于元素边界。我真的希望我错了。在我的脑子里，这应该和位置完全一样。

.main{
  background:rgba(0,0,0,0.1);
  height: 400px;
  width: 400px;
  position: relative;
  perspective-origin: left bottom;
  perspective: 100px;
}

.plane1{
  background: red;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: rotateX(15deg) rotateY(20deg);
}
.plane2{
  background: blue;
  height: 100px;
  width: 100px;
  position: absolute;
  right: 50px;
  bottom: 50px;
  transform: rotateX(15deg) rotateY(20deg);
}

<div class="main">
  <div>
    <div>
      <div class="plane1"></div>
    </div>
  </div>
  <div>
    <div>
      <div class="plane2"></div>
    </div>
  </div>  
</div>

css

来源：https://stackoverflow.com/questions/71356857/maintain-single-css-perspective-origin-for-entire-page

1条答案

按热度按时间

2w2cym1i1#

Temani Afif在线程中的回答是正确的--必须为透视图声明和要从属于该透视图的元素之间的每个后代设置transform-style: preserve-3d。
由于此属性不是继承的，因此必须为元素的所有非叶后代设置此属性。

html, body {
  width: 500px;
  height: 300px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  overflow-x:hidden;
  overflow-y:auto;
  perspective: 100px;
  perspective-origin: left;
}

.main {
background: rgba(0,0,0,0.1);
  height: 500px;
}

* {
  transform-style: preserve-3d;
}

.plane1{
  background: red;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 150px;
  left: 50px;
  transform: rotateX(15deg) rotateY(20deg);
}
.plane2{
  background: blue;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 200px;
  left: 200px;
  transform: rotateX(5deg) rotateY(10deg);
}

<div class="main">
  <div>
    <div>
      <div class="plane1"></div>
    </div>
  </div>
  <div>
    <div>
      <div class="plane2"></div>
    </div>
  </div>  
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

为整个页面维护单个CSS透视源

1条答案

相关问题

热门标签

最新问答