Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content.
Home Page: http://www.zachstronaut.com/projects/rotate3di/
Due to the latest update, firefox has removed support for skew() in firefox 14.
https://developer.mozilla.org/en/Firefox_14_for_developers#CSS
Is it possible to bring this jquery plugin back to work in ff14?
As of jQuery v1.6, $.props no longer exists. See here for details:
http://bugs.jquery.com/ticket/9117
So trying to use rotate3Di, it gives you an error "$.props is undefined".
is there a way to have a straight transition from left to right without the card spinning upward slightly, just from left to right?
for example: http://davidwalsh.name/demo/css-flip.php
I tried messing with your code but keep getting sloppy / nasty results..most likely because I don't know what im doing / what to add / remove...thanks!
I am having problems when I use this plugin in firefox, chrome/chromium, and i change to another tab and wait for a while (a minute +-)
When I come back to the tab where the animation is (automatic flipping), the animation runs faster, like if all the animations that were supposed to be running while the tab is hidden are all run when returning to the tab without the proper pause.
Is this problem of javascript and the way the browser is executing the script or what?
I noted that in the plugin homepage (http://www.zachstronaut.com/projects/rotate3di/) this DOES NOT HAPPENS. Why?
The browsers versions are:
Chromium: 12.0.742.112 (90304) Ubuntu 10.10
Chrome: 12.0.742.124
Firefox: 5.0
This is my code:
<html>
<head>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/base.js"></script>
<script type="text/javascript" src="media/js/rotate3di.js"></script>
<style type="text/css">
#contenedor {
border: 2px solid blue;
width:410px;
padding:70px;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
}
.carta {
width: 320px;
border: 2px solid gray;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
background-color: #282828;
}
.carta img {margin:10px;}
</style>
<script type="text/javascript">
window.onload = function(){
$('#animar').rotate3Di(-30, 800);
setInterval(function() {$('#animar').rotate3Di('toggle', 2000, {sideChange: mySideChange});}, 4000);
}
function mySideChange(front) {
if (front) {
$(this).css('background', '#282828');
} else {
$(this).css('background', '#CCC');
}
}
</script>
</head>
<body>
<div id="contenedor">
<div id="animar" class="carta">
<p>just a demo!</p>
<img src="media/demo.jpg">
</div>
</div>
</body>
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.