我从这里有这个旋转木马,我正在尝试向它添加一些 css3 转换选项。
更确切地说:
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg);
在我的 javascript 中
if (newPosition == 1) {
new_width = pluginData.largeFeatureWidth;
new_height = pluginData.largeFeatureHeight;
new_top = options.topPadding;
new_zindex = $feature.css("z-index");
new_fade = 1.0;
} else {
new_width = pluginData.smallFeatureWidth;
new_height = pluginData.smallFeatureHeight;
new_top = options.smallFeatureOffset + options.topPadding;
new_zindex = 1;
new_fade = 0.4;
}
animate 函数在这里运行
.animate(
{
width: new_width,
height: new_height,
top: new_top,
left: new_left,
opacity: new_fade
}
生成的CSS是:
element.style {
width: 225px;
height: 115px;
top: 70px;
left: 50px;
opacity: 0.4;
z-index: 1;
}
现在,所有这些变量都由这个插件计算,我只对向这个动画函数添加转换选项感兴趣,如下所示:
....
} else {
new_width = pluginData.smallFeatureWidth;
new_height = pluginData.smallFeatureHeight;
new_top = options.smallFeatureOffset + options.topPadding;
new_zindex = 1;
new_fade = 0.4;
new_transform_style = 'preserve-3d';
new_transform = 'rotateY(45deg)';
}
和
.animate(
{
width: new_width,
height: new_height,
top: new_top,
left: new_left,
opacity: new_fade,
transform_style = new_transform_style;
transform = new_transform;
}
但我不确定这些是动画的正确样式符号
有任何想法吗?
谢谢