jQuery+css3实现响应鼠标拖动旋转的3D书本动画效果源码.zip资源-CSDN文库

共5个文件

jpg：3个

html：1个

js：1个

版权申诉

jQuery

68 浏览量 2022-11-06 23:41:47 上传评论收藏 1.02MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery+css3实现响应鼠标拖动旋转的3D书本动画效果源码.zip （5个子文件）

132689893684509942

images

left.jpg 40KB

back.jpg 600KB

front.jpg 370KB

index.html 6KB

jquery-1.11.1.min.js 94KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery + css3 可以用鼠标交互操作（旋转）的3D书本</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; cursor: -webkit-grab; cursor: grab; } #container { -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; position: relative; width: 100%; height: 100%; overflow: hidden; background-color: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #info { position: absolute; top: 0; left: 0; } #cube { position: relative; margin: 0 auto; width: 612px; height: 759px; -webkit-transform: rotateY(0deg) rotateX(0deg) scale(0.7); transform: rotateY(0deg) rotateX(0deg) scale(0.7); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; } #cube > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 20px; opacity: 1; background-position: center center; text-align: center; } #cube .grandcote { height: 759px; width: 612px; } #cube .petitcote { height: 759px; width: 65px; } #cube .extremite { height: 65px; width: 612px; } #cube div:nth-child(1) { -webkit-transform: translateZ(32.5px); transform: translateZ(32.5px); background-image: url(images/front.jpg); background-repeat: no-repeat; background-size: 100% 100%; } #cube div:nth-child(2) { -webkit-transform: rotateY(90deg) translateZ(306px); transform: rotateY(90deg) translateZ(306px); background-color: #0294d2; background-repeat: no-repeat; background-size: 100% 100%; } #cube div:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(32.5px); transform: rotateY(180deg) translateZ(32.5px); background-image: url(images/back.jpg); background-repeat: no-repeat; background-size: 100% 100%; } #cube div:nth-child(4) { -webkit-transform: rotateY(-90deg) translateZ(306px); transform: rotateY(-90deg) translateZ(306px); background-image: url(images/left.jpg); background-repeat: no-repeat; background-size: 100% 100%; } #cube div:nth-child(5) { -webkit-transform: rotateX(-90deg) translateZ(379.5px); transform: rotateX(-90deg) translateZ(379.5px); /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#13318a+0,0354ab+51,0294d2+100 */ background: #13318a; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #13318a 0%, #0354ab 51%, #0294d2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #13318a 0%, #0354ab 51%, #0294d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#13318a', endColorstr='#0294d2', GradientType=1); /* IE6-9 */ background-repeat: no-repeat; background-size: 100% 100%; } #cube div:nth-child(6) { -webkit-transform: rotateX(90deg) translateZ(379.5px); transform: rotateX(90deg) translateZ(379.5px); background: #13318a; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #13318a 0%, #0354ab 51%, #0294d2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #13318a 0%, #0354ab 51%, #0294d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#13318a', endColorstr='#0294d2', GradientType=1); /* IE6-9 */ background-repeat: no-repeat; background-size: 100% 100%; } </style> </head> <body> <div id="container"> <div id="cube" class="animate"> <div class="grandcote"></div> <div class="petitcote"></div> <div class="grandcote"></div> <div class="petitcote"></div> <div class="extremite"></div> <div class="extremite"></div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script> var positionx = 0; var positionClickX = 0; var positionClickY = 0; var positiony = 0; var anglex = 0; var angley = 0; var click = false; var scale = 0.7; var ancienAngleX = 0; var ancienAngleY = 0; var lEcran = window.innerWidth; var hEcran = window.innerHeight; $(document).ready(function() { $('#container').on('mousedown', function(event) { positionClickX = event.clientX; positionClickY = event.clientY; calculAngle(positionClickX, positionClickY); update(positionClickX, positionClickY); $(this).on('mousemove', function(e) { calculAngle(e.clientX, e.clientY); update(positionClickX, positionClickY); }); $(this).on('mouseup', function() { $(this).off('mousemove'); }); }); }); function update(x, y) { $('#cube').css("transform", "rotateY(" + anglex + "deg) rotateX(" + angley + "deg) scale(" + scale + ")"); // console.log(x+'/'+y); } function calculAngle(x, y) { positionx = x - lEcran / 2; anglex = Math.floor((positionx * 180) / (lEcran / 2)); // anglex=anglex+ancienAngleX; positiony = y - hEcran / 2; angley = Math.floor((positiony * 180) / (hEcran / 2)); angley = angley + ancienAngleY; console.log(anglex + '/' + angley); } </script> </body> </html>

评论收藏

内容反馈

版权申诉