未在Safari中加载图像/CSS转换_Css_Twitter Bootstrap_Safari_Transform

未在Safari中加载图像/CSS转换

css twitter-bootstrap safari

未在Safari中加载图像/CSS转换,css,twitter-bootstrap,safari,transform,Css,Twitter Bootstrap,Safari,Transform,我在一个引导框架内使用一些（看起来）基本的css，出于某种原因，一旦我将代码放入引导框架，它就开始爆裂，不再显示图像或转换如果你使用Chrome/FF/（甚至IE），你可以看到图像在鼠标上方加载和变换。如果你把它放在Safari上，虽然它只是坐在那里，只显示卡的背面我已经为这件事焦头烂额好几个小时了，任何建议都将不胜感激谢谢：）我的代码是： <!DOCTYPE html> <html lang="en"> <head> <meta c

我在一个引导框架内使用一些（看起来）基本的css，出于某种原因，一旦我将代码放入引导框架，它就开始爆裂，不再显示图像或转换

如果你使用Chrome/FF/（甚至IE），你可以看到图像在鼠标上方加载和变换。如果你把它放在Safari上，虽然它只是坐在那里，只显示卡的背面

我已经为这件事焦头烂额好几个小时了，任何建议都将不胜感激

谢谢：）

我的代码是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/dickshit.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<div class="row">
    <div class="col-md-6 col-md-offset-3">

<div id="f2_container">
<div id="f2_card" class="shadow">
  <div class="front face">
    <img src="/cardbacks/default.png" height="359" width="241"/>
  </div>
  <div class="back face center">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
        </div>
</div>
</div>
    </div></div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

尝试添加

.face {-webkit-backface-visibility: hidden; backface-visibility: hidden;}

您正在使用Safari“不支持”的某些CSS。要解决此问题，您需要做的是将

-webkit-

添加到其中一些之前（如下面链接的W3schools页面中所述）：

变换（）
变换样式（）
过渡（）
透视图（）
背面可见性（）

一旦为这些样式添加了额外的代码，结果在Safari中也会很好（我在Safari 5.1.7中进行了测试），CSS如下所示：

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
}
#f1_container {
    position: relative;
    float: left;
    margin: 10px 20px 10px auto;
    width: 241px;
    height: 359px;
    z-index: 1;
}
#f1_container {
    perspective: 1000px;
    -webkit-perspective:1000px;
}
#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all 1.0s linear;
    -webkit-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#f2_container {
    position: relative;
    float: left;
    margin: 10px 20px 10px auto;
    width: 241px;
    height: 359px;
    z-index: 1;
}
#f2_container {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
#f2_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all 1.0s linear;
    -webkit-transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

我把它插进去，没有看到任何变化：(

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
}
#f1_container {
    position: relative;
    float: left;
    margin: 10px 20px 10px auto;
    width: 241px;
    height: 359px;
    z-index: 1;
}
#f1_container {
    perspective: 1000px;
    -webkit-perspective:1000px;
}
#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all 1.0s linear;
    -webkit-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#f2_container {
    position: relative;
    float: left;
    margin: 10px 20px 10px auto;
    width: 241px;
    height: 359px;
    z-index: 1;
}
#f2_container {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
#f2_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all 1.0s linear;
    -webkit-transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}