1

私はここからこのカルーセルを持っています、そして私はそれにいくつかの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;
      }

しかし、それらがアニメートに適したスタイルの表記法であるかどうかはわかりません

何か案は？

ありがとう

4

2 に答える 2

2

デフォルトでは、jQueryで回転/スケールをアニメーション化することはできません。

しかし、これを修正するプラグインがあります：

CSSで回転とスケールをアニメーション化する

于 2012-04-12T21:09:00.750 に答える
0

でカスタムプロパティを.animate()使用し、step関数を使用して「手動で」変換を実行できます。

詳細については、このSOの回答を参照してください。

于 2014-02-16T20:34:30.593 に答える