Safari 中的 CSS 3D 变换答案

【问题标题】：CSS 3D transforms in SafariSafari 中的 CSS 3D 变换
【发布时间】：2014-12-07 22:24:31
【问题描述】：

我正在尝试让图像旋转到视图中 - 见下文。

它适用于 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>

【问题讨论】：

标签： html ios css safari

【解决方案1】：

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

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

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

这是我编辑的小提琴：

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

希望对你有帮助，

问候护目镜

【讨论】：