CSS3 translateZ 不在 mac Safari 8.0.3 中

Question

它在 FF/Chrome 中完美运行。

<div id="css-transform-container">
        <img src="/static/img/shamegallery/Abraham_Beame.gif">

#css-transform-container {
  width:100%;
  height:100%;
  perspective: 180px;
}

#css-transform-container img {
  cursor: zoom-in;
  transform: translateZ(-200px);
  -webkit-transform: translateZ(-200px);
  -o-transform: translateZ(-200px);
  -ms-transform: translateZ(-200px);
  -moz-transform: translateZ(-200px);
}

我确定它支持 translateZ 功能，因为我尝试了其他网站，我的 Safari 显示翻译没有问题。

Answer 1

尝试使用preserve-3d。

看下面这个例子：

#main {
       display: block;
       position: absolute;
       width: 400px; height: 400px;
       border: thin solid red;
       top: 10px;
       left: 10px;
       -webkit-transform-style: preserve-3d;
       -webkit-perspective: 1000px;
    }

也检查一下：http://caniuse.com/#feat=transforms3d

CSS3 translateZ 不在 mac Safari 8.0.3 中

CSS3 translateZ is not in mac Safari 8.0.3

css

safari

transform