Question

我对野生动物园有一个奇怪的错误......

我有3个带字幕的div，隐藏了rotateX(-91deg)。在:hover上，标题通过rotateX(0deg)发出。它在Chrome等中完美运行。当我在safari中悬停时，它仅适用于第一个div。当我将鼠标悬停在2.或3.时，动画不起作用。

查看我的演示：http://jsbin.com/aseced/28/edit

HTML：

<article class="tile2x1">
  <section class="caption"></section>
</article>
<article class="tile2x1">   
  <section class="caption"></section>
</article>
<article class="tile2x1">
  <section class="caption"></section>
</article>

CSS：

[class*="tile"] > section.caption {
    padding-top: 20px;
    width: 100%;
    background-color: blue;
    height: 100px;

    transform-origin: top;
    -o-transform-origin: top;
    -moz-transform-origin: top;
    -webkit-transform-origin: top;

    transform: perspective( 600px ) rotateX( -91deg );
    -o-transform: perspective( 600px ) rotateX( -91deg );
    -moz-transform: perspective( 600px ) rotateX( -91deg );
    -webkit-transform: perspective( 600px ) rotateX( -91deg );

    transition: all .25s linear;
    -o-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Chrome and Safari */
    -moz-backface-visibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
}

[class*="tile"]:hover > section.caption {
    transform: perspective( 600px ) rotateX( 0deg );
    -o-transform: perspective( 600px ) rotateX( 0deg );
    -moz-transform: perspective( 600px ) rotateX( 0deg );
    -webkit-transform: perspective( 600px ) rotateX( 0deg );
}

感谢您的帮助。

TJL

Safari变换rotatex bug

0 个答案: