html - Safari 中的 CSS 3D 变换

Question

我正在尝试让图像旋转进入 View - 见下文。

它适用于 Chrome，但不适用于 Safari，因此不适用于 iPad - 图像发生变化，但旋转效果不会发生。我认为这只是一个打字错误，但我根本看不出来。

$(document).ready(function() {
	$(".qcontainer").on("click", function(e) {
		var p = $(this).find(".back").attr("src");
		console.log(p);
		$(this).find(".inner").addClass("rotated");
	});
})

.container {
    position: relative;
    height: 100%;
    min-height:400px;
}

.qcontainer {
    position: absolute;
    perspective: 800px;
    -webkit-perspective: 800px;
    width: 80px;
    height: 80px;
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: transform 1s;
}

.inner.rotated {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.inner .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
    border: 2px solid white;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="qcontainer" style="top:5px; left:100px">
        <div class="inner">
            <img src="https://dl.dropboxusercontent.com/u/240178989/xmas/img/qmark.png" class="front face" />
            <img src="https://dl.dropboxusercontent.com/u/240178989/xmas/img/jona.jpg" class="back face" />
        </div>
    </div>
</div>

Answer 1

你必须在你的内部类中使用线性变换:

 -webkit-transition: -webkit-transform 1s linear;
 transition: transform 1s linear;

我关注了这个网站:http://css3clickchart.com/#3d-transform

这是我编辑的 fiddle :

http://jsfiddle.net/0evd8mco/5/

希望对你有帮助

问候遮阳板