Question

我为我的网站构建了一个简单的导航组件，左右摆动'门'。这些在除Safari之外的所有浏览器中都很有效，当鼠标从一个门移动到另一个门时，“门”似乎完全消失在其背景之后。只要您在触摸蓝色门之前等待动画停止，一次将鼠标悬停在一扇门上即可正常工作。

此外，我网站的一个页面有一个固定的背景视频，在该页面上动画根本不起作用，整个div一旦悬停在它上面就会消失。

我已经在这个问题上工作了很长一段时间，并且想不出这种奇怪行为的可能原因。如果我实现动画而不将其放在引导网格中，它就可以工作，但是一旦涉及到背景视频，它就会导致在此代码中看到同样的问题。

提前感谢任何想法，为什么会发生这种情况！

HTML：

<head>
  <link href="css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 greenbackground">
      <a href="#">
        <div class="greenlink doorleft">
          <h1>Left Swing Link</h1>
        </div>
      </a>
    </div>
    <div class="col-xs-6 bluebackground">
      <a href="#">
        <div class="bluelink doorright">
          <h1>Right Swing Link</h1>
        </div>
      </a>
    </div>
  </div>
</div>
<body>

CSS：

.greenlink{
  width: calc(100% + 30px);
  padding-top:5em;
  padding-bottom:5em;
  text-align:center;
  background-color: lightgreen;
  margin-left:-15px;
}

.greenbackground{
  background-color: green;
}

.bluelink{
  width: calc(100% + 30px);
  padding-top:5em;
  padding-bottom:5em;
  text-align:center;
  background-color:lightblue;
  margin-left:-15px;
}

.bluebackground{
  background-color:blue;
}

.doorleft{
  transition: all 500ms ease;
  transform: perspective(900px) rotateY(0deg);
  transform-origin: 0% 0%;
  -webkit-transform-style: preserve-3d;
}

.doorleft:hover {
   transform: perspective(1000px) rotateY(30deg);
}

.doorright {
  transition: all 500ms ease;
  transform: perspective(900px) rotateY(0deg);
  transform-origin: 100% 0%;
  -webkit-transform-style: preserve-3d;
}

.doorright:hover {
  transform: perspective(1000px) rotateY(-30deg);
}

以下是codepen的链接：https://codepen.io/anon/pen/RgBdJp

Answer 1

我不知道为什么，但是让.col-xs-6 position: static解决它（bootstrap给它position: relative）。在这种情况下，它不会影响任何其他因素，所以应该没问题。显然这是一个Safari问题。

Safari中的CSS3 3D动画消失

1 个答案: