ネイティブJSを介して、イベント、マウスプレス、マウスリフト、マウスの動きイベントをクリックして、3Dキューブの抗力と回転が実現し、回転角がインターフェイスに表示するためにリアルタイムに反映されます。
実装の原則：画面をクリックするときにマウスの座標を取得し、移動するときにマウスの座標を取得することにより、X軸とY軸上で移動するマウスの距離を取得し、変換属性への距離をリアルタイムで割り当てることができます。
したがって、3Dキューブ回転の効果は、変換：回転属性値を変更することで達成されます。
HTMLコードブロック：
<body> <入力タイプ= "ボタン"値 "value ="クリックして広がる "/> <入力タイプ=" text "value =" "" /// x-axis回転角<入力タイプ= "text" value = "" /// y-軸回転角<入力<入力type = "text"/> <div> <div> <span> </span> <span> </span> </span> <span> </span> <span> </span> </span> </div> </body>
CSSコードブロック：
<style> body {cursor：url（ "img/openhand1.png"）、auto;}。big_box {width：500px; height：500px; margin：200px auto;}。 Preserve-3d;変換スタイル：Preserve-3d; Transform-Origin：100px 100px 00px; Position：Recation：Recation：Rotatex（0DEG）Rotatey（0DEG）ROTATEZ（0DEG）SCALE3D（0.7,0.7,0.7）;}。 200px;高さ：200px;ボックスサイジング：ボーダーボックス;ボーダー：1PXソリッド＃999;/*不透明度：0.7;*/テキストアライグ：ラインハイト：200px; font-size：60px; font-weight：700; border-radius：12％;}。 rotatey（-90deg）translatex（-100px）; // left} .box span：nth-child（2）{background-color：red; transform-origin：right; transmatey：rotatey（90deg）translatex（100px）; // right}。 rotatex（90deg）translatey（-100px）; // top} box span：nth-child（4）{background-color：＃6633ff; transfient-origin：bottom; transmatex（-90deg）translatey（100px）; // bottom}。翻訳（-100px）; // back}JSコードブロック：
<script> move（）; clickbox（）; //マウスが押されて移動されたとき、free、function move（）{var body = document.queryselector（ "body"）; var box = documer.queryselector（ "。box"）; var xnum = document.queryselector（ "。xnum"）; var ynum = document. queryselector（ynum "; ynum（"。 = 0、yy = 0; var xarr = []、yarr = []; windo.onmousedown = function（e）{// mouse press event body.style.cursor = 'url（ "img/closdhand1.png"）、auto'; xarr [0] = e.clientx/2; e.clienty/2; window.onmousemove = function（e）{// mouse moving event----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = xx+"°";// Assign the obtained distance回転角度を表示する入力ynum.value = yy+"°"; //回転角を変換box.style.transform = "rotatex（"+xx+"deg）rotatey（"+yy+"deg）rotatez（0deg）scale3d（0.7,0.7,0.7）" = y.clientx/2; e.clienty/2;}}; window.onmouseup = function（）{// mouselift event ---マウスの動きイベントをクリアするために使用されるbody.style.cursor = 'url（ "img/openhand1.png"）、auto'; window.onmousemove = null;}} = document.queryselector（ "。open"）; var box = document.queryselector（ "。box"）; var son = box.children; var value = 0; //変換パラメーターの保存var arr0 = ["rotatey（-90deg）translatex（-100px）" Translatey（-100px） "、<br>" Rotatex（-90deg）translatey（100px） "、" translatez（-100px） "、" translatez（100px） "]; //変換パラメーターvar arr1 = [" rotatey（-90deg）translatex（90px）（90px） "" "" potyz） translatex（100px）translatez（100px） "、<br>" rotatex（90deg）translatey（-100px）translatez（100px） "、" rotatex（-90deg）translatey（100px） "（100px）"、 "lranslatez（-200px）"; function（）{if（value == 0）{value = 1; btn.value = "クリックしてマージ"; j = 0; j <arr0.length; j ++）{son [j] .style.transform = arr0 [j]; console.log（j）;}};} </script>上記は、CSS3の新しい属性変換とネイティブJSに基づいて3Dキューブの回転をドラッグするマウスについて紹介された関連知識です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！