Есть исходник 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>
