<div class="container"> <div> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div> <div><figure></figure><figure></figure><figure></figure><figure></figure></div> <div><figure></figure><figure></figure><figure></figure><figure></figure></div> </div> <style> *{ /* 3D 加速 */ transform-style:preserve-3d; } body{ background:black; } .container{ width:200px; height:200px; position:relative; margin:200px auto; /* preserve-3d是在做3d转换的时候用到的,然后就会有Z轴的3d转换效果, 如果不设置或者设置成flat看到的只是一个平面上的变换 */ transform-style:preserve-3d; } .container div{ width:200px; height:200px; position:absolute; } .container div:nth-child(1){ transform:rotateX(90deg); } .container div:nth-child(2){ transform:rotateY(90deg); } @keyframes rotate{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } /** 每个div 有4个 figure*/ figure{ width:100%; height:100%; margin:0; position:absolute; background:url(http://img.duoziwang.com/2016/09/02/15483442009.jpg) no-repeat; /**把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。**/ background-size:cover; } figure:nth-child(1){ /** 有些时候需要实现一些倒影的效果。比如说,你看到一个美女, 你想从另一个角度来看这个MM的风姿 。 **/ -webkit-box-reflect:above; } figure:nth-child(2){ /* 下倒影, 就像走在湖面上的效果 */ -webkit-box-reflect:below; } figure:nth-child(3){ -webkit-box-reflect:left; } figure:nth-child(4){ -webkit-box-reflect:right; } body{ animation: rotate 2s linear infinite; transform-orgin:50% 200px; } html{ overflow:hidden; } </style> <script> var div = document.querySelector('div'); var flag = false;// 是否启动拖拽 document.addEventListener('mousedown', function() { flag = true; document.body.style.setProperty('animation-play-state', 'paused'); }, false); document.addEventListener('mouseup', function() { flag = false; document.body.style.setProperty('animation-play-state', 'running'); }, false); document.addEventListener('mousemove', function move(e) { if (!flag) { move.lastX = e.x; move.lastY = e.y; return; } var transform = getComputedStyle(div).getPropertyValue('transform'); transform == 'none' && (transform = ''); div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)'); move.lastX = e.x; move.lastY = e.y; }, false); </script>