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中

1 个答案: