1
私の問題です： 私はこのCSSキューブのスクロールをしようとしてきました。そして私はそれをやった！ここにそれが働いた方法です：https://codepen.io/vaninoo/pen/BmyYQdドラッグ＆スクロールでjavascriptキューブを回転
私は非常に満足していました。しかし、友人と一緒にそれをテストした後、彼らの多くは回転させるためにキューブを "ドラッグ"したかったようです。だから私はこの機能を追加することにしました。これは私が得た最も近いものです：https://codepen.io/vaninoo/pen/jaEZBx
キューブはドラッグで回転でき、ドラッグした後にスクロールすることで回転できます。しかし：
- 私がスクロールするたびに、前にクリックしなくてもそれを回したいと思います。
- 私はそれを移動するときに "ジャンプ"を削除する方法を見つけることができません。キューブの位置を記憶しておく必要がありますが、私は非常に努力してしまいました。ここで
あなたは私のペンで見つけることができるコードは（「最も近い私が得た」）である：
// START OF UNSURE PART
$('document').ready(function() {
\t var lastScrollTop = 0;
\t $(window).scroll(function trucenscroll(event) {
\t var st = $(this).scrollTop();
\t var sl = $(this).scrollLeft();
\t if (st > lastScrollTop) {
\t
\t //Le cube tourne
\t \t var p1,angle,i,tmp;
\t \t \t
\t \t \t p1 \t = {'x': sl - p0.x, \t 'y': st - p0.y },
\t \t \t angle \t = {'x': -p1.y * unit, \t \t 'y': p1.x * unit};
\t \t
\t \t \t for(i = 0; i < faces.length; i++)
\t \t \t {
\t \t \t \t tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
\t \t \t \t faces[i].style.transform = p + tmp;
\t \t \t \t faces[i].style['-webkit-transform'] = p + tmp;
\t \t \t }
\t }
\t else if(st == lastScrollTop) {
\t //do nothing
\t //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
\t }
\t else {
\t \t \t var p1,angle,i,tmp;
\t \t \t p1 \t = {'x': sl - p0.x, \t 'y': st - p0.y },
\t \t \t angle \t = {'x': -p1.y * unit, \t \t 'y': p1.x * unit};
\t \t
\t \t \t for(i = 0; i < faces.length; i++)
\t \t \t {
\t \t \t \t tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
\t \t \t \t faces[i].style.transform = p + tmp;
\t \t \t \t faces[i].style['-webkit-transform'] = p + tmp;
\t \t \t }
\t }
\t lastScrollTop = st;
\t });
});
// END OF UNSURE PART
init(); \t \t
//===========================================================
// \t \t \t onMouseMove
//===========================================================
function onMouseMove(e)
{
\t var p1,angle,i,tmp;
\t if (! dragging) return;
\t p1 \t = {'x': e.clientX - p0.x, \t 'y': e.clientY - p0.y },
\t angle \t = {'x': -p1.y * unit, \t \t 'y': p1.x * unit};
\t for(i = 0; i < faces.length; i++)
\t {
\t \t tmp = 'rotateX(' + angle.x + 'deg)' + ' rotateY(' + angle.y + 'deg)' + styles[i];
\t \t faces[i].style.transform = p + tmp;
\t \t faces[i].style['-webkit-transform'] = p + tmp;
\t }
}
//===========================================================
// \t \t \t onMouseDown
//===========================================================
function onMouseDown(e)
{
\t var element;
\t onMouseUp(); \t // disable if dragging
\t element = e.target;
\t //if (! element.classList.contains('face')) return false;
\t e.preventDefault();
\t window.p0 \t = { 'x': e.clientX, 'y': e.clientY };
\t dragging \t = true;
\t return false;
}
//===========================================================
// \t \t \t onMouseUp
//===========================================================
function onMouseUp(e)
{
\t var i,tmp,style;
\t if (! dragging) return;
\t dragging = false;
\t for (i = 0; i < faces.length; i++)
\t {
\t \t style = faces[i].style;
\t \t tmp = style.transform || style['-webkit-transform'];
\t \t styles[i] = tmp.replace('perspective(32em) ', '');
\t }
}
//=====================================================================
// \t \t \t initializeCube
//=====================================================================
function initializeCube()
{
\t var i,tmp;
\t for (i = 0; i < faces.length; i++)
\t {
\t \t if (i < 4) tmp = 'rotateY(' + i*90 + 'deg)';
\t \t if (i >= 4) tmp = 'rotateX(' + Math.pow(-1, i) * 90 + 'deg)';
\t \t tmp += ' translateZ(' + side/2 + 'px)';
\t
\t \t faces[i].style.transform = p + tmp;
\t \t faces[i].style['-webkit-transform'] = p + tmp;
\t \t styles.push(tmp);
\t }
}
//=====================================================================
// \t \t \t init
//=====================================================================
function init()
{
\t window.addEventListener('mousedown', onMouseDown, false);
\t window.addEventListener('mouseup', onMouseUp, false);
\t window.addEventListener('mousemove', onMouseMove, false);
\t window.faces \t \t = document.querySelectorAll('.face');
\t window.styles \t \t = new Array();
\t window.style \t \t = getComputedStyle(faces[0]);
\t window.factor \t \t = 3;
\t window.side \t \t = parseInt(style.width.split('px')[0], 10);
\t window.max_amount \t = factor * side;
\t window.unit \t \t = 360/max_amount;
\t window.dragging \t = false;
\t window.scrolling \t = false;
\t window.p \t \t = 'perspective(32em)';
\t initializeCube();
}body {
\t position: relative;
\t height:5000px;
}
.cube, .cube *
{
position: absolute;
top: 25vh;
left: 50%;
}
.cube
{
user-select: none;
cursor: move;
}
.cube div span
{
\t position: relative;
\t top: 60px;
\t left: -5px;
\t font-size: 8em;
}
.face
{
\t box-sizing: border-box;
\t border: solid 1px;
\t margin: -8em;
\t width: 16em;
\t height: 16em;
\t box-shadow: inset 0 0 15px rgba(0,0,255,0.6);
\t text-align: center;
\t /** backface-visibility: hidden; /**/
}
.face:nth-child(1) {
\t background: rgba(255, 0, 0, 0.2);
}
.face:nth-child(2) { background: rgba(255, 255, 0, 0.2); }
.face:nth-child(3) { background: rgba( 0, 255, 0, 0.2); }
.face:nth-child(4) { background: rgba( 0, 255, 255, 0.2); }
.face:nth-child(5) { background: rgba( 0, 0, 255, 0.2); }
.face:nth-child(6) { background: rgba(255, 0, 255, 0.2); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body translate="no" onload="init()">
<div class='cube' id="cubo">
<div class='face'><span>1</span></div>
<div class='face'><span>2</span></div>
<div class='face'><span>3</span></div>
<div class='face'><span>4</span></div>
<div class='face'><span>5</span></div>
<div class='face'><span>6</span></div>
</div>
</body>
こんにちは！質問のコードを質問エディタツールバーのスニッピット（{{}}ボタン）に変換して、質問にコードを埋め込み、実行し、実行可能コードを簡単に回答にコピーすることができます。 – msanford
これは素晴らしいことです！本当にありがとう、私は次回にやるよ！ –