So erstellen Sie mit CSS3 eine coole 3D-Animation mit Richtungserkennung, wenn die Maus über ein Bild gleitet

Dieser Artikel stellt hauptsächlich CSS3 zum Erstellen cooler 3D-Animationen von Mouseover-Bildern mit Richtungserkennung vor. Es hat einen gewissen Referenzwert und ist mit den neuesten Mainstream-Browsern kompatibel. Sie können sich auf

beziehen

Dies ist ein cooler 3D-Animations-Spezialeffekt mit Richtungserkennung, bei dem die Maus mithilfe von CSS3 und ein wenig JS über das Bild gleitet. Wenn bei den Spezialeffekten die Maus des Benutzers über das Bild im Raster gleitet, wird auf der Inhaltsmaskenebene im Raster eine 3D-Flip-Animation angezeigt, die über eine Richtungserkennung verfügt und aus der Richtung der Mauseingabe gestartet werden kann Der Effekt ist sehr cool.

Online-Vorschau Quellcode-Download

Verwendung

HTML-Struktur

Die HTML-Struktur der richtungsabhängigen Mouseover-Animation verwendet die HTML-Struktur einer ungeordneten Liste, um ein Rasterlayout zu erstellen. Jedes Raster verwendet ein 486d7a50595533609bc98d44595dc670-Element als Platzhalter, bei dem es sich eigentlich um ein kleines Symbol eines Bildes handelt. Darüber hinaus ist p.info die Maskenebene, die in 3D gespiegelt werden soll.

<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-Stil

Das gesamte Rasterlayout wird mithilfe einer ungeordneten Liste erstellt und alle Li-Elemente bleiben schwebend.

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;   
}

Um einen 3D-Effekt zu erzeugen, fügen Sie gleichzeitig jedem Li-Element Perspektivattribute hinzu.

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

Die Maskenebene p.info, die zum Erstellen von 3D-Flips verwendet wird, ist standardmäßig auf 100 % Breite und 100 % Höhe eingestellt, wobei absolute Positionierung verwendet wird, beginnend in der oberen linken Ecke. Verwenden Sie dann die Funktion „rotate3d()“, um es um 90 Grad im Uhrzeigersinn entlang der X-Achse zu drehen, sodass es unsichtbar wird.

.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);   
}

Schließlich sind im CSS-Stil Klassen für das Betreten und Verlassen der Maus aus den vier Richtungen oben, unten, links und rechts voreingestellt. Diese Klassen werden mithilfe von JavaScript erkannt Wenn die Maus das Raster betritt, geben Sie die Eingaberichtung der Maus ein und fügen Sie dann die entsprechende Klasse hinzu.

.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

Dieser Spezialeffekt verwendet JavaScript, um die Richtung zu ermitteln, in die die Maus das Raster betritt, und fügt die entsprechende Klasse für die entsprechende Rasteranimation hinzu. Die Funktion getDirection() ist die Richtungsfunktion.

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;   
};

Fügen Sie dann die entsprechende Klasse hinzu, indem Sie alle li-Elemente durchlaufen und die entsprechende Klasse in der Richtung hinzufügen, in die die Maus eintritt.

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Mit CSS3 eine coole Black Cat Sheriff-Homepage implementieren

So verwenden Sie CSS3, um eine zu erstellen einfaches 3D-Bild eines durchscheinenden Würfels

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 eine coole 3D-Animation mit Richtungserkennung, wenn die Maus über ein Bild gleitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!