CSS转换 - 旋转不符合要求

时间:2013-07-28 22:08:03

标签: jquery css transform

我正在使用:

transform: rotateY( 45deg );

和(右侧)

transform: rotateY( -45deg );

..但结果并不像预期的那样,元素仍然看起来像一个矩形。请检查这个小提琴:http://jsfiddle.net/uy57B/1/

2 个答案:

答案 0 :(得分:1)

您需要添加观点:

.left, .right {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    perspective: 400px;
}

使用它直到找到正确的号码。更大将使角度看起来更轻,因为场地更深。

答案 1 :(得分:0)

使用:不是。在其中一个元素中添加一个类名,代码应如下所示:

    <style type="text/css">
       div:not(.special):hover{
         transform: perspective(400px) rotateY(45deg);
       }
    </style>

    <div></div>
    <div></div>
    <div class="special"></div>