css - 3D转换在转换结束时失去了视野

所以我有这样的代码，希望bg1 div从左侧旋转一定角度，但是正如您可能看到的那样，最后，它“失去了透视”，正如我看到的，尽管我可能是错误的。您认为我做错了什么，或者该怎么做才能实现自己的目标？

简单页面的代码：

    <style>
    #bg1{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background-color:orange;

        font-size:100px;
        font-family:Arial;
        color:white;
        text-align:center;

        -webkit-transform: perspective(100px);
        -webkit-transform-origin:left;
        transition:1s;
    }
    #bg1:active{
        -webkit-transform:rotateY(85deg);
    }
    </style>

    <body>
    <div id="bg1"></div>
    </body>

提前致谢。

最佳答案

您还需要指定活动状态的透视图，因为它位于他转换的内部：

#bg1:active{
    -webkit-transform: perspective(100px) rotateY(85deg);
}

否则，您将过渡到旋转但没有透视图的元素。（当然，在过渡过程中，它仍然有一些视角）

关于css - 3D转换在转换结束时失去了视野，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18552497/