Question

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

提前致谢。

Answer 1

你需要在活动状态中指定透视也，因为它在变换中：

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

否则，您正在转换为旋转但没有透视的元素。（当然在过渡期中它还有一些观点）

3D转换在转换结束时失去了视角

1 个答案: