元素在使用带正参数的透视()函数后消失
元素在使用带正参数的透视()函数后消失
提问于 2017-02-13 15:42:19
我正在读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中尝试了这个页面，仍然有问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 2017-02-13 16:30:56
尝尝这个
div#inner {
transform: rotate(30deg) translate(20px) perspective(30px);
width: 100px;
}<div id="outer">
outer
<div id="inner">inner</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42198891
复制相关文章
相似问题
腾讯云开发者
