使用 javascript、html5 和 css3 创建 3D 旋转鼠标跟踪瓷砖导航墙

Question

我一直在搜索，但在网上找不到任何内容，但我有兴趣创建（或使用现有的东西，希望因为我时间紧迫）类似于此网站： http://www.citroen.hr/citroen/#/citroen/

它也类似于 Safari 的热门站点视图，但添加了鼠标跟踪和 3D 旋转。

有谁知道用 javascript/html/css 创建的类似的东西或者可以为我指出正确的方向吗？

Answer 1

2020更新

这是类似的更现代的版本。

2013年解决方案

带有 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);
}());