5

立方体の透視図の角度を次のように取得しようとしています。

http://jsfiddle.net/TrySpace/JvFSQ/5/

でも思った通りにはいかないので、実際の画角を変えて欲しいです。つまり、transformOrigin: Xpos+'%'+Ypos+'%'100％-100％の場合です。見る角度は右下隅からで、立方体の右/下側が見えると予想しました。しかし、それがしているように見えるのは、立方体を拡大することだけです。

.css( perspective-origin: X% X% )through jQueryを設定しても何も起こらないように見えるため、jstransitを使用しています。

私はまだ3DCSSを完全には理解していないと思います。

誰かが私がどこで間違っているのか見ることができますか？

（Update1：​​最初の：を編集して<section>：を設定transform: rotateY(1deg) rotateX(1deg)すると、それはさらに少なくなるようです。変換が行われる必要があるかのように、ビュー角度を変更するには？http://jsfiddle.net/TrySpace/JvFSQ/6/）。

（Update2：つまり、Y＆Xを90度に設定すると、逆になりますが、ある程度欲しいものが得られます。私の考えはどこで間違っているのでしょうか？http://jsfiddle.net/TrySpace/JvFSQ/8/）

4

2 に答える 2

7

transform-origin画角は変わりません。変換の中心を変更します。rotation

プロパティが消失点を計算するperspective-origin 方法を変更しますperspective。これは「視点」を扱っています。

今、私はあなたが何を達成しようとしているのか正確にはわかりません（したがって、ここでの私の「解決策」はあなたが望むものではないかもしれません）が、正しい方向にあなたを導くのは、このプロパティを変更するようにコードを設定することだと思いますプロパティが設定されているarticleラッパー。perspective

このフィドルを参照してください。

スクリプトの最後の行を次のように変更しました

$("article").css({ perspectiveOrigin: Xpos+'% '+Ypos+'%' });

そして、にリセットしtransform-originます。これはまだあなたが望んでいることではないと思いますが、あなたが望む機能はあなたが期待しているものに近いと思います。sectiontransform-origin: 50% 50% 0px;

于 2013-01-17T15:22:50.087 に答える
2

このようなもの ？

$(document).mousemove(function (event) {
    var Xdeg = 0;
    var Ydeg = 0;
    Ydeg = 90- (event.pageX * 90) / ($(document).width() / 2);            
    Xdeg =  -90 + (event.pageY * 90) / ($(document).height()/2);
    $('#DIVName').css('transform', 'translateZ( -200px ) perspective( 600px ) rotateY( ' + Ydeg + 'deg ) rotateX( ' + Xdeg + 'deg )');
});
于 2016-03-11T08:29:04.427 に答える