1

我对 safari 有一个奇怪的错误...

我有 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

4

0 回答 0