使用javascript,html5和css3创建一个三维旋转鼠标跟踪墙的导航

Question

我一直在寻找,我在网上找不到任何东西,但我有兴趣创建(或使用现有的东西,希望因为我的时间紧迫),类似于这个网站: http:// www. citroen.hr/citroen/#/citroen/

它也类似于Safari Top Sites视图,但增加了鼠标跟踪和3D旋转.

有没有人知道用javascript/html/css创建的类似东西,或者能指出我正确的方向？

Answer 1

具有HTML元素的基本版本,CSS 3D变换(因此它仅适用于支持3D变换和嵌入3D变换元素的浏览器 - 这意味着没有Opera和没有IE)以及用于鼠标跟踪的一点JavaScript:

演示

HTML:

<ul class='tiles'>
  <li class='tile'></li>
  <!-- more tiles; I used 16 for the demo and put them on an icosagon -->
</ul>
<div class='slider'></div>

相关CSS:

.tiles {
  position: absolute;
  top: 50%; left: 50%;
  padding: 0;
  width: 0; height: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: rotateY(-162deg);
}    
.tile {
  position: absolute;
  left: 50%;
  margin: 0.5em -10em;
  width: 20em; height: 20em;
  backface-visibility: hidden;
  opacity: 0.5;
  /* inradius of an icosagon */
  cursor: pointer;
  transition: 0.5s;
}
.tile:hover { opacity: 1; }
.tile:nth-child(odd) { bottom: 100%; }
.tile:nth-child(2), .tile:nth-child(1) {
  transform: rotateY(18deg) translateZ(-66.29439em);
}
/* and so on... in general, something of the form: 
.tile:nth-child(2*i), .tile:nth-child(2*i-1) {
  transform: rotateY(1*18deg) translateZ(-66.29439em);
}
where 18deg = outer angle of the icosagon 
66.29439em = 1.05*20em*(1 + sqrt(5) + sqrt(5 + 2*sqrt(5)))/2 
           = 1.05 * inradius of icosagon
see http://mathworld.wolfram.com/Icosagon.html */
.tile:nth-child(1) {
  background: url(image1.jpg);
  background-size: cover;
}
/* and so on, set backgrounds for each */
.slider {
  position: absolute;
  bottom: 5%; left: 10%;
  height: 0.25em; width: 80%;
  opacity: 0.5;
  background: grey 
    linear-gradient(90deg, crimson 100%, transparent 100%) no-repeat;
  background-size: 5% 100%;
}

JavaScript:

(function(){
  var b = document.body;

  b.addEventListener('mousemove', function(e) {
    var w = b.clientWidth, x = e.clientX, 
        perc = x/w, 
        full_angle = -162, 
        to_angle = full_angle + (100 - perc)*full_angle, 
        txt = 'rotateY(' + to_angle + 'deg)', 
        prefixes = ['Webkit', 'Moz', /*'ms', 'O', */''], 
        len = prefixes.length, 
        property = 'Transform',
        a = document.querySelector('.tiles'), 
        s = document.querySelector('.slider');
    for(var i = 0; i < len; i++) {
      if(prefixes[i] == '')
        property = property.toLowerCase();
      a.style[prefixes[i] + property] = txt;
    }
    s.style.backgroundPosition = (perc*100 - .5) + '% 50%';
  }, false);
}());