Плавное вращение 3Dкуба на css3

[romoga]

Есть исходник 3д куба с надписями на гранях, но он дергается при повороте мышкой и текст на нем выделяется..

Как это устранить? спс.

вот пример

http://www.paulrhayes.com/experiments/cube-3d/touch.html

$(function(){    var el = document.createElement('div'),        transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),        transformProp = support(transformProps),        transitionDuration = 'transitionDuration WebkitTransitionDuration MozTransitionDuration OTransitionDuration msTransitionDuration'.split(' '),        transitionDurationProp = support(transitionDuration);    function support(props) {        for(var i = 0, l = props.length; i < l; i++) {            if(typeof el.style[props[i]] !== "undefined") {                return props[i];            }        }    }    var mouse = {            start : {}        },        touch = document.ontouchmove !== undefined,        viewport = {            x: -10,            y: 20,            el: $('.cube')[0],            move: function(coords) {                if(coords) {                    if(typeof coords.x === "number") this.x = coords.x;                    if(typeof coords.y === "number") this.y = coords.y;                }                this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)";            },            reset: function() {                this.move({x: 0, y: 0});            }        };    viewport.duration = function() {        var d = touch ? 50 : 500;        viewport.el.style[transitionDurationProp] = d + "ms";        return d;    }();    $(document).keydown(function(evt) {        switch(evt.keyCode)        {            case 37: // left                viewport.move({y: viewport.y - 90});                break;            case 38: // up                evt.preventDefault();                viewport.move({x: viewport.x + 90});                break;            case 39: // right                viewport.move({y: viewport.y + 90});                break;            case 40: // down                evt.preventDefault();                viewport.move({x: viewport.x - 90});                break;            case 27: //esc                viewport.reset();                break;            default:                break;        };    }).bind('mousedown touchstart', function(evt) {        delete mouse.last;        if($(evt.target).is('a, iframe')) {            return true;        }        evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;        mouse.start.x = evt.pageX;        mouse.start.y = evt.pageY;        $(document).bind('mousemove touchmove', function(event) {            // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)            if(!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {                event.preventDefault();                // Get touch co-ords                event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;                $('.viewport').trigger('move-viewport', {x: event.pageX, y: event.pageY});            }        });        $(document).bind('mouseup touchend', function () {            $(document).unbind('mousemove touchmove');        });    });    $('.viewport').bind('move-viewport', function(evt, movedMouse) {        // Reduce movement on touch screens        var movementScaleFactor = touch ? 4 : 1;        if (!mouse.last) {            mouse.last = mouse.start;        } else {            if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) {                mouse.start.x = mouse.last.x;            }            if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) {                mouse.start.y = mouse.last.y;            }        }        viewport.move({            x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor),            y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor)        });        mouse.last.x = movedMouse.x;        mouse.last.y = movedMouse.y;        function forward(v1, v2) {            return v1 >= v2 ? true : false;        }    });    /* Just for fun */    if(!touch) {        $('.cube > div').eq(2).html('<object width="360" height="360"><param name="movie" value="http://www.youtube.com/watch?v=MY5PkidV1cM?fs=1&hl=en_GB&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/watch?v=MY5PkidV1cM?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360"></embed></object>');    }});

h2 {    margin-top: 0;}.viewport {    -webkit-perspective: 800;    -webkit-perspective-origin: 50% 200px;    -webkit-transform: scale(0.75,0.75);    -moz-perspective: 800;    -moz-perspective-origin: 50% 200px;    -moz-transform: scale(0.75,0.75);}.cube {    position: relative;    margin: 0 auto;    height: 400px;    width: 400px;    -webkit-transition: -webkit-transform 50ms linear;    -webkit-transform-style: preserve-3d;    -webkit-transform: rotateX(-10deg) rotateY(20deg);    -moz-transition: -moz-transform 50ms linear;    -moz-transform-style: preserve-3d;    -moz-transform: rotateX(-10deg) rotateY(20deg);}.cube h2 {    color: #fff;    padding-top: 0;    margin-top: 0;}.cube a {    color: #fff;}.cube > div {    position: absolute;    height: 360px;    width: 360px;    padding: 20px;    background-color: rgba(50, 50, 50, 0.85);    font-size: 1em;    line-height: 1em;    color: #fff;    border: 1px solid #555;    border-radius: 3px;}.cube > div:first-child {    -webkit-transform: rotateX(90deg) translateZ(200px);    -moz-transform: rotateX(90deg) translateZ(200px);}.cube > div:nth-child(2) {    -webkit-transform: translateZ(200px);    -moz-transform: translateZ(200px);}.cube > div:nth-child(3) {    -webkit-transform: rotateY(90deg) translateZ(200px);    -moz-transform: rotateY(90deg) translateZ(200px);    text-align: center;}.cube > div:nth-child(4) {    -webkit-transform: rotateY(180deg) translateZ(200px);    -moz-transform: rotateY(180deg) translateZ(200px);}.cube > div:nth-child(5) {    -webkit-transform: rotateY(-90deg) translateZ(200px);    -moz-transform: rotateY(-90deg) translateZ(200px);}.cube > div:nth-child(5) p {    text-align: center;    font-size: 2.77em;    margin: 40px;    line-height: 60px;}.cube > div:nth-child(6) {    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);    -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);}object {    opacity: 0.5;}object:hover {    opacity: 1;}/* Zoom and blur experiment *//* As of June 10th 2012: filters are webkit only *//*************************************************/.zoom-wrapper {    -webkit-animation: zoom-in 5s linear infinite alternate;    -webkit-filter: blur(0);    -webkit-transform-style: preserve-3d;}@-webkit-keyframes zoom-in {    from {        -webkit-transform: translateZ(-1000px);        -webkit-filter: blur(3px);    }    to {        -webkit-transform: translateZ(100px);        -webkit-filter: blur(0);    }}

<!DOCTYPE html><html><head>    <!-- Article: http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/ -->    <!-- Demo: http://www.paulrhayes.com/experiments/cube-3d/touch.html -->    <!-- Originally posted: 28th September 2010 -->    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <title>3D CSS cube, use arrow keys, touch gestures or click and drag to rotate — Paul Hayes</title>    <meta name="author" content="Paul Hayes" />    <link rel="stylesheet" href="../experiment-styles.css" />    <link rel="stylesheet" href="css/experiment.css" />    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body class="experiment">    <div class="wrapper">        <p class="learn">            This is a demo, <a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/">learn how it works</a>.        </p><article class="viewport">    <section class="cube">        <div></div>        <div>            <h2>3D cube</h2>            <time>28th September 2010</time>            <p>By Paul Hayes</p>            <p>3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.</p>            <p>Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.</p>            <p><a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/" target="_top">Read more »</a></p>        </div>        <div>            <!-- video -->        </div>        <div>            <h2><a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Learn how to make a cube</a></h2>            <time>17th July 2009</time>            <p>By Paul Hayes</p>            <p>“A 3D cube can be created solely in CSS, with all six faces.”</p>            <p>Article: <a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Cube explanation</a></p>        </div>        <div>            <p>I design and build websites in Brighton</p>        </div>        <div>            <small>Nothing down here.</small>        </div>    </section></article>    </div>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>    <script src="js/experiment.js"></script> </body></html>

Edited January 17, 2014 by romoga

[npofopr]

У меня не дергается и не выделяется.

[iKNG]

Дергается из-за подвисания компьютера (ну при таком-то скрипте ясно, что будет подвисать). А выделение можно решить так.

И еще:

.cube {cursor:move;}

Edited January 18, 2014 by iKNG

[Zverushka]

У меня тоже дергается. Мне кажется не в тормозах дело, а в скрипте.  У него криво реализовано движение на залипание мышки. А если просто одним кликом направить - то плавно все. Нужно вовремя стопать анимацию и включать новую, а как это сделать через css-анимацию - непонятно. Видимо нужно на jquery реализовать ее.

Edited January 18, 2014 by Zverushka