CSS 变换 - RotateY 不符合要求

【问题标题】：CSS Transform - RotateY not as desiredCSS 变换 - RotateY 不符合要求
【发布时间】：2013-07-28 22:08:02
【问题描述】：

我正在使用：

transform: rotateY( 45deg );

和（右侧）

transform: rotateY( -45deg );

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

【问题讨论】：

标签： jquery css transform

【解决方案1】：

你需要添加透视图：

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

玩它，直到找到正确的数字。更大会使角度看起来更小，因为场更深。

【讨论】：

【解决方案2】：

使用 :not。将类名添加到您的元素之一，代码应如下所示：

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

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

【讨论】：