CSS3 を使用して、マウスが画像上をスライドするときに方向を感知するクールな 3D アニメーションを作成する方法

この記事では主に、方向感知機能を備えたマウスオーバー画像のクールな 3D アニメーションを作成する CSS3 について詳しく紹介します。これは一定の参考価値があり、最新の主流ブラウザーと互換性があります。興味のある方は、

を参照してください。

これは、CSS3 と少しの JS を使用して、マウスが画像上をスライドする方向検知機能を備えたクールな 3D アニメーション特殊効果です。特殊効果では、ユーザーのマウスがグリッド内の画像上をスライドすると、3D 反転アニメーションがグリッド内のコンテンツ マスク レイヤーに表示され、方向検知機能があり、マウス入力の方向から反転を開始できます。エフェクトはとてもクールです。

##オンライン プレビュー ソース コードのダウンロード

使用方法

HTML 構造

方向依存のマウスオーバー アニメーションの HTML 構造は、順序なしリストの HTML 構造を使用してグリッド レイアウトを作成します。各グリッドはプレースホルダーとして 486d7a50595533609bc98d44595dc670 要素を使用します。これは実際には画像の小さなアイコンです。また、p.info は 3D で反転するマスク レイヤです。

<p class=&#39;container&#39;>  
  <ul>  
    <li>  
      <a class=&#39;normal&#39; href=&#39;#&#39;>  
        <svg viewBox=&#39;0 0 80 76&#39; x=&#39;0px&#39; y=&#39;0px&#39;>  
          <g>  
            <path d=&#39;M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z&#39;></path>  
          </g>  
        </svg>  
      </a>  
      <p class=&#39;info&#39;>  
        <h3>...</h3>  
        <p>....</p>  
      </p>  
    </li>  
    ......   
  </ul>  
</p>

CSS スタイル

グリッド レイアウト全体は順序なしリストを使用して作成され、すべての li 要素はフローティングのままになります。

ul {   
  padding: 0;   
  margin: 0 0 50px;   
}   
ul:after {   
  content: "";   
  display: table;   
  clear: both;   
}   
    
li {   
  position: relative;   
  float: left;   
  width: 200px;   
  height: 200px;   
  margin: 5px;   
  padding: 0;   
  list-style: none;   
}   
li a {   
  display: inline-block;   
  vertical-align: top;   
  text-decoration: none;   
  border-radius: 4px;   
}

同時に、3D 効果を作成するために、各 li 要素にパースペクティブ属性を追加します。

li {   
  -webkit-perspective: 400px;   
          perspective: 400px;   
}

3D 反転の作成に使用されるマスク レイヤー p.info は、デフォルトで幅 100%、高さ 100% に設定され、左上隅から始まる絶対位置が使用されます。次に、rotate3d() 関数を使用して、X 軸に沿って時計回りに 90 度回転し、非表示にします。

.info {   
  -webkit-transform: rotate3d(1, 0, 0, 90deg);   
          transform: rotate3d(1, 0, 0, 90deg);   
  width: 100%;   
  height: 100%;   
  padding: 20px;   
  position: absolute;   
  top: 0;   
  left: 0;   
  border-radius: 4px;   
  pointer-events: none;   
  background-color: rgba(26, 188, 156, 0.9);   
}

最後に、CSS スタイルでは、マウスが上下左右の 4 方向から出入りする場合のクラスがあらかじめ設定されており、これらのクラスは JavaScript を使用して検出されます。マウスがグリッドに入ったときのマウスの進入方向を示し、それに対応するクラスを追加します。

.in-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;   
          animation: in-top 300ms ease 0ms 1 forwards;   
}   
    
.in-rightright .info {   
  -webkit-transform-origin: 100% 0%;   
          transform-origin: 100% 0%;   
  -webkit-animation: in-rightright 300ms ease 0ms 1 forwards;   
          animation: in-rightright 300ms ease 0ms 1 forwards;   
}   
    
.in-bottombottom .info {   
  -webkit-transform-origin: 50% 100%;   
          transform-origin: 50% 100%;   
  -webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards;   
          animation: in-bottombottom 300ms ease 0ms 1 forwards;   
}   
    
.in-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;   
          animation: in-left 300ms ease 0ms 1 forwards;   
}   
    
.out-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;   
          animation: out-top 300ms ease 0ms 1 forwards;   
}   
    
.out-rightright .info {   
  -webkit-transform-origin: 100% 50%;   
          transform-origin: 100% 50%;   
  -webkit-animation: out-rightright 300ms ease 0ms 1 forwards;   
          animation: out-rightright 300ms ease 0ms 1 forwards;   
}   
    
.out-bottombottom .info {   
  -webkit-transform-origin: 50% 100%;   
          transform-origin: 50% 100%;   
  -webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards;   
          animation: out-bottombottom 300ms ease 0ms 1 forwards;   
}   
    
.out-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;   
          animation: out-left 300ms ease 0ms 1 forwards;   
}

JavaScript

この特殊効果は、JavaScript を使用してグリッドに入るマウスの方向を取得し、対応するグリッド アニメーションに対応するクラスを追加します。 getDirection() 関数は方向関数です。

var getDirection = function (ev, obj) {   
    var w = obj.offsetWidth,    
        h = obj.offsetHeight,    
        x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1),    
        y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1),    
        d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;   
    return d;   
};

次に、すべての li 要素をトラバースし、マウスが入った方向に対応するクラスを追加します。

var nodes = document.querySelectorAll('li'),   
    _nodes = [].slice.call(nodes, 0);   
var addClass = function (ev, obj, state) {   
    var direction = getDirection(ev, obj), class_suffix = '';   
    obj.className = '';   
    switch (direction) {   
    case 0:   
        class_suffix = '-top';   
        break;   
    case 1:   
        class_suffix = '-right';   
        break;   
    case 2:   
        class_suffix = '-bottom';   
        break;   
    case 3:   
        class_suffix = '-left';   
        break;   
    }   
    obj.classList.add(state + class_suffix);   
};   
_nodes.forEach(function (el) {   
    el.addEventListener('mouseover', function (ev) {   
        addClass(ev, this, 'in');   
    }, false);   
    el.addEventListener('mouseout', function (ev) {   
        addClass(ev, this, 'out');   
    }, false);   
});

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連おすすめ:

CSS3 を使用して超クールな黒猫保安官のホームページを実現します

CSS3 を使用して作成する方法シンプルな 3D 半透明立方体画像

以上がCSS3 を使用して、マウスが画像上をスライドするときに方向を感知するクールな 3D アニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。