CSS Safari 悬停门开启效果问题

Question

据此link 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 的屏幕截图

Answer 1

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

为了完整性从您的评论中编辑：

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

Answer 2

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

CSS Safari 悬停门开启效果问题

CSS Hover Door opening effect issue on Safari

css

safari

onhover