使用javascript, html5和css3创建3d旋转鼠标跟踪墙导航

Create a 3d rotating mouse-tracking wall of tiles navigation using javascript, html5 and css3

本文关键字：鼠标 旋转 跟踪 导航 3d 创建 javascript html5 css3 使用      更新时间：2023-09-26

我一直在搜索，我在网上找不到任何东西，但我有兴趣创建(或使用已经可用的东西，希望因为我时间紧迫)类似于这个网站:http://www.citroen.hr/citroen//雪铁龙/

它也类似于Safari Top Sites视图，但增加了鼠标跟踪和3d旋转。

有没有人知道类似的东西创建与javascript/html/css或可以指出我在正确的方向?

一个基本版本，包含HTML元素，CSS 3D转换(所以它只在支持3D转换的浏览器中工作&3D转换元素的嵌套-这意味着没有Opera和IE)和一点点JavaScript用于鼠标跟踪:

演示

: 

<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);
}());
相关文章：