4

jqueryを使用して要素のtransformzを変更する必要があります。私はcssのdivを持っています：

.bottom_face {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(487px);
  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(347px);
 }

ユーザーがフォームのプロパティを変更するときに、translateZ値を変更して、入力した金額を追加したいと思います。

$('.bottom_face ').css('-webkit-transform') ??

rotateXおよびrotateプロパティを上書きせずに上記のtranslateZプロパティにアクセスするにはどうすればよいですか？

ありがとう

4

5 に答える 5

1

Op、

まず、私はあなたが求めることを達成するプランクを設定します。これが私がそれをした方法です：

JS

$('document').ready(function () {
    $('#amount_to_rotate').keydown(function () {
        var el = $(".bottom_face"),
            amt = parseInt($(this).val());
        rotZ = {
            '-webkit-transform': 'rotateX(-9deg) rotate(-10deg) translateZ(' + amt + 'px)',
            '-moz-transform'   : 'rotateX(-9deg) rotate(-10deg) translateZ(' + amt + 'px)',
        }
        el.css(rotZ);
    }).keyup(function () {
        if ($(this).val().length == 0) {
            // Return to state given by CSS class
            $(".bottom_face").attr('style', ' ');
        }
    });
});

詳細

inputにはイベントリスナーがkeydownあります。keyupユーザーが値を入力すると、その値がオブジェクトに追加され、stylejQueryのcss関数を介して要素の属性にプッシュされます。このようにオブジェクトを使用すると、静的な値を設定amtし、そのtranslateZ値に変数（この場合は）を渡すことができます。

安全のために、私たちはユーザー入力を扱っているので、val()数字だけを引き出すことによって入力のsantizeします：parseInt($(this).val());

また、注目に値するのは、変換に最初に指定した値を変更しrotateX(-90deg)て、要素がx軸上で反転して非表示になるようにする必要があったことです。それがあなたの望む結果であるならば、あなたは明らかにそれをあなたが適切だと思うものに戻すことができます。

お役に立てれば。

于 2013-03-13T23:18:59.420 に答える
1

以下は、最低限のコードを削除しようとしたコードです。

$("#add").click(function() {
    var z = $("#z").val();
    $(".bottom-face").each(function() {
        var $c = $(this);
        var css;
        if (css = $c.css("-webkit-transform")) {    // assignment
            $c.css("-webkit-transform",
               $c.css("-webkit-transform") + " translateZ(" + z + "px)"
            );
            //console.log( $c.css("-webkit-transform") );
        }
    });
});

そしてjsfiddleへのリンク

于 2013-03-14T08:52:46.867 に答える
0

変更した translateZ を追加してみませんか?

.bottom_face {
    transform: translateZ(487px);
}

と同じ結果になります

.bottom_face {
    transform: translateZ(487px) translateZ(-50px) translateZ(50px);
}

編集：私が意味するものの例。

于 2013-03-08T17:17:10.993 に答える
0

使用.css(-webkit-transform)すると値が返さmatrix3dれるため、元の値を見つけるのが非常に困難になります。

の例matrix3d:

matrix3d(-1, 0.00000000000000012095693648649962, -0.000000000000000019157696688784726, 0, -0.00000000000000012246467991473532, -0.9876883405951378, 0.15643446504023087, 0, 0, 0.15643446504023087, 0.9876883405951378, 0, 0, 76.18358447459244, 481.0042218698321, 1)

値を見つけることができますrotate: sourceまたはdemo ; rotateX残念ながら、これにはorは含まれませんrotateY。

これを行う最も簡単な方法は、次のようにすることです。

var _translate = '30px';
$('.bottom_face').css('-webkit-transform', 'rotateX(-90deg) rotate(180deg) translateZ(' + _translate + ')');

デモ: http://jsfiddle.net/SLGdE/21/

お役に立てれば！

于 2013-03-08T21:47:01.920 に答える