3D鼠标拖拽卡片CSS3动画特效css代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 3D鼠标拖拽卡片CSS3动画特效css代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D鼠标拖拽卡片CSS3动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card">
	<img src="img/hearthstone-ragnaros.png" class="card-image" draggable="false">
</div>

<script type="text/javascript">
	var card,
		image,
		cardw,
		cardh,
		cardx,
		cardy,
		ocardx,
		ocardy,
		pinx,
		piny,
		pinxperc,
		pinyperc,
		targetx,
		targety,
		rx,
		ry,
		targetrx,
		targetry,
		scale,
		targetscale,
		ww,
		wh,
		md,
		mx,
		my,
		whoosh,
		whooshvol,
		whooshvoltarget,
		majesty,
		majestyvol,
		majestyvoltarget,
		audioloaded;

	function audioload() {
		audioloaded++;
		if( audioloaded == 2 ) {
			document.body.classList.add( 'loaded' );
			majesty.play();
			whoosh.play();
			bindevents();
			loop();
		}
	}

	function init() {
		onresize();
		card = document.querySelector( '.card' );
		image = document.querySelector( '.card-image' );
		cardw = image.width;
		cardh = image.height;
		cardx = ww / 2 - cardw / 2;
		cardy = wh / 2 - cardh / 2;
		ocardx = cardx;
		ocardy = cardy;
		pinx = 0;
		piny = 0;
		pinxperc = 0;
		pinyperc = 0;
		targetx = cardx;
		targety = cardy;
		rx = 0;
		ry = 0;
		targetrx = 0;
		targetry = 0;
		scale = 1;
		targetscale = scale;
		md = false;
		mx = cardx;
		my = cardy;
		audioloaded = 0;
		
		whooshvol = 0;
		whooshvoltarget = 0;
		whoosh = new Audio();
		whoosh.addEventListener( 'canplaythrough', audioload );
		whoosh.src = 'media/hs-whoosh.ogg';
		whoosh.volume = 0;
		whoosh.loop = true;
		
		majestyvol = 0;
		majestyvoltarget = 0;
		majesty = new Audio();
		majesty.addEventListener( 'canplaythrough', audioload );
		majesty.src = 'media/hs-majesty.ogg';
		majesty.volume = 0;
		majesty.loop = true;
	}

	function bindevents() {
		card.addEventListener( 'mousedown', onmousedown );
		window.addEventListener( 'mouseup', onmouseup );
		window.addEventListener( 'mousemove', onmousemove );
		window.addEventListener( 'resize', onresize );
	}

	function onmousedown( e ) {
		md = true;
		mx = e.pageX;
		my = e.pageY;
		pinx = cardw / 2;
		piny = cardh / 2;
		//pinx = mx - cardx; // to pin to click point
		//piny = my - cardy; // to pin to click point
		pinxperc = 100 - ( pinx / cardw ) * 100;
		pinyperc = 100 - ( piny / cardh ) * 100;
	}

	function onmouseup() {
		md = false;
	}

	function onmousemove( e ) {
		if( md ) {
			mx = e.pageX;
			my = e.pageY;
		}
	}

	function onresize() {
		ww = window.innerWidth;
		wh = window.innerHeight;
	}

	function loop() {
		requestAnimationFrame( loop )
		
		targetx = mx - cardx - pinx;
		targety = my - cardy - piny;
		
		cardx += targetx * 0.25;
		cardy += targety * 0.25;
		
		if( cardx < -cardw / 2 ) {
			cardx = -cardw / 2;
		}
		if( cardx > ww - cardw / 2 ) {
			cardx = ww - cardw / 2;
		}
		if( cardy < -cardh / 2 ) {
			cardy = -cardh / 2;
		}
		if( cardy > wh - cardh / 2 ) {
			cardy = wh - cardh / 2;
		}
		
		targetrx = ( ocardy - cardy - rx ) * 3;
		targetry = ( cardx - ocardx - ry ) * 3;
		targetrx = Math.min( targetrx, 90 );
		targetrx = Math.max( targetrx, -90 );
		targetry = Math.min( targetry, 90 );
		targetry = Math.max( targetry, -90 );
		
		rx += targetrx * 0.1;
		ry += targetry * 0.1;
			
		targetscale = md ? 1.2 - scale : 1 - scale;
		scale += targetscale * 0.2;
		
		card.style[ 'transform' ] = 'translate3d(' + cardx + 'px, ' + cardy + 'px, 0)';
		image.style[ 'transform-origin' ] = pinxperc + '% ' + pinyperc + '%';
		image.style[ 'transform' ] = 'scale(' + scale + ') rotateY(' + ry + 'deg) rotateX(' + rx + 'deg)';
		
		majestyvoltarget = md ? 0.2 : 0;
		majestyvol += ( majestyvoltarget - majestyvol ) * 0.1;
		majesty.volume = majestyvol;
		
		whooshvoltarget = ( Math.abs( ( ocardy - cardy ) ) + Math.abs( ( ocardx - cardx ) ) ) * 0.003;
		whooshvol += ( whooshvoltarget - whooshvol ) * 0.1;
		whoosh.volume = Math.min( whooshvol, 1 );
		
		ocardx = cardx;
		ocardy = cardy;
	}

	window.onload = init;
</script>
</body>
</html>

CSS代码(style.css):

html,body{height:100%;}
body{background:#66677c;cursor:url(../img/hearthstone-cursor.png) 10 2,auto;overflow:hidden;}
body:active{cursor:url(../img/hearthstone-click.png) 10 2,auto;}
body:after{background-color:#66677c;content:'';will-change:transform;z-index:-1;}
.card{left:0;top:0;-webkit-perspective:400px;perspective:400px;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform;width:250px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;}
.card:active{cursor:url(../img/hearthstone-grab.png) 10 2,auto;}
.card-image{display:block;pointer-events:none;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%;will-change:transform;user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;}

附件:下载该文件资源,减少时间成本(增值服务)