* { padding:0; margin:0; } html,body { width:100%; height:100%; } body { -webkit-perspective:1000px; -moz-perspective:1000px; -ms-perspective:1000px; perspective:1000px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; } #all { width:800px; height:400px; border:1px solid black; position:absolute; left:0; right:0; margin:auto; top:30px; background:url(http://www.jq22.com/img/cs/500x300b.png); background-size:100% 100%; border-radius:10px; transition:all 0.2s; -webkit-perspective:1000px; -moz-perspective:1000px; -ms-perspective:1000px; perspective:1000px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; } #all:hover { transform:translateZ(10px); box-shadow:0 0 40px black; border:0px solid black; } #img { width:120px; height:100px; position:absolute; left:430px; top:200px; transform:translateZ(250px); }
根据鼠标对于图片中心点位置的偏移,带动图片进行偏转