Safari上的CSS Hover Door打开效果问题答案

【问题标题】：CSS Hover Door opening effect issue on SafariSafari上的CSS Hover Door打开效果问题
【发布时间】：2016-04-24 15:02:13
【问题描述】：

据此链接Repost or flag my own question for migration?

我必须重新发布我的问题以获得有用的答案。

根据 CSS，在悬停时，门应该是打开的。它适用于 Firefox、Opera、Chrome 和 IE，但在 Safari 5.1.7 中对悬停没有影响。这里的问题在哪里？此悬停的 CSS 部分如下：

    $(document).ready(function() {
      $("#cupboard").on("touchstart", function(e) {
        $(this).addClass("hover");
        e.preventDefault();
      });

      $("body").on("touchend", function(e) {
        $("#cupboard").removeClass("hover");
      });

    });

 html,
 body {
   margin: 0;
   padding: 0;
   background: #C2B3A0;
 }
 /*user-select: none;*/
 /*background: url(bg.jpg);*/
 #cupboard {
   height: 613px;
   width: 617px;
   position: relative;
   left: 35%;
   margin-left: -112px;
   top: 24px;
   bottom: 31px;
   perspective: 500;
   background: url(bg.png);
   background-position: center center;
   background-size: 95%;
   background-repeat: no-repeat;
   background-attachment: fixed;
 }
 #cupboard img {
   position: inherit;
   height: 200px;
   width: 200px;
   float: left;
   margin-left: 62px;
   margin-top: 82px;
 }
 #cupboard .door#left {
   zoom: .6;
   position: absolute;
   width: 512px;
   height: 100%;
   background-image: url(dl.jpg);
   transition: transform 1s ease;
   transform: rotateY(0);
 }
 #cupboard .door#right {
   zoom: .6;
   position: absolute;
   width: 517px;
   height: 100%;
   background-image: url(dr.jpg);
   transition: transform 1s ease;
   transform: rotateY(0);
 }
 #cupboard .door#left {
   transform-origin: top left;
   left: 0;
 }
 #cupboard .door#right {
   transform-origin: top right;
   right: 0;
 }
 #cupboard:hover #left,
 #cupboard.hover #left {
   -webkit-transform: rotateY(-90deg);
   transform: rotateY(-90deg);
 }
 #cupboard:hover #right,
 #cupboard.hover #right {
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
 }

<html>

<head>
  <script src="http://s.codepen.io/assets/libs/prefixfree.min.js"></script>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>

<body>
  <div id="cupboard">
    <a href="http://www.facebook.com">
      <img src="f.jpeg" alt="facebook" />
    </a>
    <a href="http://www.twitter.com">
      <img src="t.jpeg" alt="twiter" />
    </a>
    <a href="http://www.linkedin.com">
      <img src="l.png" alt="linkedin" />
    </a>
    <a href="http://www.wordpress.com">
      <img src="w.jpg" alt="wordpress" />
    </a>

    <div class="door" id="left"></div>

    <div class="door" id="right"></div>
  </div>

</body>

</html>

这是输出页面的截图：-

悬停前：-

悬停后：-

Safari 截图

【问题讨论】：

标签： css safari onhover

【解决方案1】：

根据caniuse，safari 需要-webkit- 前缀才能工作。此外，在您的透视长度之后，您没有任何单位。

从您的评论中编辑以确保完整性：

还需要使用-webkit-transition: all 1ms ease;

【讨论】：

@perterjb 正如你所说，我使用了 -webkit-perspective: 500px;视角：500px；现在它显示出一些效果，但与镀铬不同，门是打开的，但它不在侧边框上居中。
@akash 不幸的是，我工作时没有 safari，所以我看不到您在说什么。能发个截图吗？
@akash 哦，我想我明白了……您也需要在 transform-origin 属性上加上前缀
@perterjb 我认为过渡不起作用。现在我可以通过更改 -webkit-transform-origin 来看到侧边框上的门。但是过渡还是有问题。它突然打开。
@perterjb 感谢您的帮助。最后，我把 -webkit-transition: all 1ms ease;现在它的工作

【解决方案2】：

每个浏览器的 Css 转换代码都不同，您应该为所有浏览器设置它们。请访问 css 技巧网站或 w3school 网站了解 safari 浏览器的标准语法。

【讨论】：