3D 变换在过渡结束时失去透视答案

【问题标题】：3D transform loses perspective at the end of the transition3D 变换在过渡结束时失去透视
【发布时间】：2013-09-04 08:09:03
【问题描述】：

所以我有这样的代码，希望 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>

提前致谢。

【问题讨论】：

标签： css transform perspective css-transforms

【解决方案1】：

您需要也在活动状态上指定透视图，因为它在变换内部：

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

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

【讨论】：