2
我试图让图像旋转到视图中 - 请参见下文。Safari中的CSS 3D转换
它适用于Chrome，但不适用于Safari，因此不适用于iPad - 图像更改，但旋转效果不会发生。我认为这只是一个错字，但我根本看不到它。
$(document).ready(function() {
\t $(".qcontainer").on("click", function(e) {
\t \t var p = $(this).find(".back").attr("src");
\t \t console.log(p);
\t \t $(this).find(".inner").addClass("rotated");
\t });
}).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>