0

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

提前致谢。

4

1 回答 1

0

You need to specify the perspective also on the active state, since it is inside he transform:

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

Otherwise, you are transitioning to a rotated, but without perspective, element. (of course in the middle of the transition it still has some perspective)

于 2013-09-01T19:17:23.480 回答