I'm trying to get an image to revolve into view - see below.
It works in Chrome, but not on Safari, and thus not on an iPad - the image changes, but the rotation effect does not happen. I think it is just a typo, but I simply can't see it.
$(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>
You have to use linear transform in your inner class:
-webkit-transition: -webkit-transform 1s linear;
transition: transform 1s linear;
I followed this site: http://css3clickchart.com/#3d-transform
here is the fiddle I edited:
http://jsfiddle.net/0evd8mco/5/
I hope this helps you,
greetings Visores
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.