jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
Time for action – initializing the widget
The first thing we need to do is set up the images ready to have their skew manipulated. We
can also add the function that will return the correct vendor-specific prefix for the transform
style property that we used in the last example. In the empty function at the bottom of the
HTML page, add the following code:
var viewer = $("#viewer"),
flow = viewer.find("#flow"),
order = flow.children().length,
oneRad = 1 * (Math.PI / 180),
matrix = ["matrix(", 1, ",", 0, ",", 0, ",", 1, ",",
"0px,", "0px)"],
msMatrix = "progid:DXImageTransform.Microsoft.Matrix(
sizingMethod='auto expand')",
getVendor = function() {
var prefix = null,
vendorStrings = {
pure: "transform",
moz: "-moz-transform",
webkit: "-webkit-transform",
op: "-o-transform"
};
for (props in vendorStrings) {
if(flow.css(vendorStrings[props]) === "none") {
prefix = vendorStrings[props];
}
}
if (prefix === null) {
prefix = "filter";
}
return prefix;
},
vendor = getVendor(),
property = (vendor !== "filter") ? matrix.join("") : msMatrix;
flow.children().eq(0).addClass("flat").css(vendor,
property).css("zIndex", order + 1);
flow.children().not(":first").each(function(i) {
el = flow.children().eq(i + 1);
[ 250 ]