В #wrapper {transform-style: preserve-3d} есть 6 .side которые спозиционированы в куб. Есть скрипт, который поворачивает #wrapper по осям X и Y так, что куб крутится относительно своей центральной точки.
$(function () {
$(document).mousemove(function (e) {
$('#wrapper').css({
'transform': 'rotateX(' + e.pageY + 'deg) rotateY(' + e.pageX + 'deg)'
});
});
});
Как изменить этот скрипт, чтобы он крутил #wrapper по нажатию мышки и перетаскиванию. Куб должен стоять на месте и крутиться, как он крутится при помощи mousemove, только при нажатии, удержании и перетаскивании мышкой. Когда курсор отжат, куб остаётся в текущем положении.
Вот коды html\css
<div id="wrapper">
<div class="back side"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="top side"></div>
<div class="bottom side"></div>
<div class="front side"></div>
</div>
body {
background: #eee;
margin: 0;
padding: 0;
perspective: 900px;
perspective-origin: center -40px;
font-family: 'PT Sans', tahoma;
}
#wrapper {
transform-style: preserve-3d;
position: relative;
width: 250px;
height: 250px;
margin: 200px auto;
/*border: 1px solid black;*/
}
.side {
position: absolute;
top: 25px;
left: 25px;
opacity: .7;
border: 3px solid white;
width: 200px;
height: 200px;
}
.back { transform: translateZ(-100px);}
.front { transform: translateZ(100px);}
.bottom { transform: translateY(100px) rotateX(90deg);}
.top { transform: translateY(-100px) rotateX(90deg);}
.left { transform: translateX(100px) rotateY(90deg);}
.right { transform: translateX(-100px) rotateY(90deg);}
Простой