0

CSS 3d 変換サイトがあります。css 3d 配置要素がいくつかあります。これには、他の 3d 変換要素の内部にネストされたものも含まれます。変換された要素はすべて、1 つの大きな包含要素の内部にあります。コンテナにも変換があり、さらに大きなラッパーの中にあります。変換された要素の 1 つがクリックされたときに、クリックされた要素が画面の中央に配置されるようにコンテナーを変換します。中央に配置した後、ズームインして画面の大部分を占めるようにしたい

私が欲しいものの簡単な例: jsFiddle

違いは、これが単純で非動的であることです。私の状況では、要素はユーザーごとに異なる場所に配置されます

そして1つのこと：NO JQUERY!

4

2 に答える 2

0

あなたが探しているのはtransform: scale()

ここでの作業例：jsfiddle

以下に示すように、これを関数に追加するだけscale(1.5)です。

transformed.onclick=function(){
    if(isTransformed){
        container.style.transform='';
        container.style.webkitTransform='';
        isTransformed=false;
    }
    else{
        container.style.transform='rotateY(-70deg) scale(1.5)';
        container.style.webkitTransform='rotateY(-70deg) scale(1.5)';
        isTransformed=true;
于 2013-08-05T22:36:25.007 に答える
0

「localToGlobal」のように、ポイントをある座標系から別の座標系に変換するジオメトリ API が必要です。現在、Firefox GeometryUtils API (FF >43) のようなジオメトリ用の API はありません。Chrome は api: webkitConvertPointFromPageToNode いくつかのバージョンより前に削除されました。IE10+ は webkitConvertPointFromPageToNode 関数をサポートしていると思います。

GeometryUtils . _ パースペクティブを使用しない限り、それは簡単なはずです。参照ポイント (topLeft、topRight、...) をローカル要素の親 (または offsetParent) 空間に変換し、マトリックスを作成するだけです。

var tx = localTopLeft;
var ty = localTopRight;
var scaleX = (localTopRight - tx) / element.offsetWidth;
var scaleY = (localBottomRight - ty) / element.offsetHeight;
var rawMatrix = [scaleX, 0, 0, scaleY, tx, ty];
element.style.transformOrigin = "0px 0px";
element.style.transform = "matrix(" + rawMatrix.join(",") + ")";

より複雑になる場合は、「AffineFit」アルゴリズムを使用して行列を作成してみてください。

幸運を

于 2015-08-14T19:00:27.977 に答える