文章/答案/技术大牛

发布

社区首页 >问答首页 >元素在使用带正参数的透视()函数后消失

问元素在使用带正参数的透视()函数后消失
EN

Stack Overflow用户

提问于 2017-02-13 15:42:19

回答 2查看 444关注 0票数 0

我正在读CSS的第八章:权威指南，第四版。书中有这样一段代码：

div#inner {
  transform: perspective(750px) translateZ(60px) rotateX(45deg);
}

<div id="outer">
  outer
  <div id="inner">inner</div>
</div>

带有# chrome的div从我的chrome浏览器中消失了。在调整透视函数的参数值并将其设置为0后，我可以在页面上看到带有一些旋转效果的inner文本。

你知道为什么吗？我在safari中尝试了这个页面，仍然有问题。

回答已采纳

发布于 2017-02-13 18:00:10

默认情况下，透视原点位于元素的中心。

因为它是一个块元素，所以这个中心在元素的文本部分的右边，所以它会导致向左移动-在某些分辨率下，它可能会被带到页面的左边框后面。

看看当元素宽度变小时，它是如何变化的：

div#inner {
  background-color: lightblue;
  transform: perspective(750px) translateZ(60px) rotateX(45deg);
}

<div id="outer">
  outer
  <div id="inner">inner</div>
</div>

div#inner {
  width: 70px;
  background-color: lightgreen;
  transform: perspective(750px) translateZ(60px) rotateX(45deg);
}

<div id="outer">
  outer
  <div id="inner">inner</div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42198891

复制

相似问题

问元素在使用带正参数的透视()函数后消失EN