3

時間をかけてより多くの CSS3 変換を組み合わせる方法はありますか? たとえば、これを設定すると

$bgWrapper.css({
 '-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'
});

そして、しばらくするとこれが

$bgWrapper.css({
'-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

問題が発生しました。最初の変換は 2 番目の変換で上書きされますが、それは私が絶対に望んでいないことです。だから私はこれらの値を組み合わせることができることを観察したので、古いものを一時的に保存してこれを行うことができます

var tmpTransform = $bgWrapper.css('-webkit-transform');
$bgWrapper.css({
'-webkit-transform' : ''+ tmpTransform +'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

しかし、それは正しくありませんが、呼び出しを繰り返すと問題があります..

css3スケールの正確な値をjavascriptから取得する方法はありますか? js 経由で CSS3 翻訳の正確な値を取得する方法はありますか? 現在、これらの値を持つマトリックスのみを取得しています。もちろん解析できますが、より良い解決策があることを願っています。

そして最後に.. -webkit-transform: matrix(...) はiPadでハードウェアアクセラレーションされていないので、matrix3dだけが方法だと思いますか? これらすべての変換を問題なく正しく組み合わせるには..

どうもありがとう、あなたが私の質問を理解してくれることを願っています:)

4

2 に答える 2

7

やりたいことを実行するには、マトリックスを操作する必要があります。

   var transform = new  WebKitCSSMatrix(window.getComputedStyle(element).webkitTransform);
   transform = transform.rotateAxisAngle(0,0,0,45)
   element.style.webkitTransform = transform;

WebkitCSSMatrixを操作する方法は次のとおりです。

.multiply()
.inverse()
.translate()
.scale()
.rotate()
.rotateAxisAngle()
.skewX()
.skewY()

そして、ここでデモを見ることができます：

http://jsfiddle.net/6jGaA/

于 2011-10-15T16:52:56.797 に答える
2

I am new to web design but am no novice Googler.

To combine transformations, you have to put all the transformations on the same line of code.

This article explains it: http://www.htmlgoodies.com/beyond/css/css3-features-every-web-designer-is-excited-about-skewed-rotated-and-scaled-text.html.

The passage I am talking about is near the bottom.

Combining the Transformations

CSS transforms by themselves are useful, but their real power is unveiled when you combine them together and get remarkable results. Whenever you are combining them, remember that you have to define all the transforms in one line. Here is the sample syntax:

#rotate-skew-scale-translate {
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}
于 2012-05-25T17:48:51.443 に答える